如何在不弄乱图像 src 属性的情况下替换链接 url答案

【问题标题】：How to replace a link url without messing up the image src attribute如何在不弄乱图像 src 属性的情况下替换链接 url
【发布时间】：2016-09-20 08:31:29
【问题描述】：

我正在尝试用较大的图像替换小图像，并将包装元素中的 href 链接替换为我保存到变量中的 url。我可以很好地替换图像，但是当我尝试替换 href 中的 url 时，它会用新的 url 替换我刚刚换出的大图像。

这是the fiddle的链接

源 HTML（缩短）

<!-- The goal is to only have the larger image show, and when clicked it links to the listing page (the url from the h4 element). I do not have control over the source html, it is a feed from Zillow -->
<article class="col span_12">
<div class="single-listing">
<!-- the previous html is under my control, after this is not -->

    <!-- this is the url I want the image to redirect to when clicked -->
     <h4 class="dsidx-address"><a href="http://barefoothosts.com/heidi/idx/mls-20649410-10_sunny_st_irvine_ca_92612">10 Sunny St., Irvine, CA 92612 (MLS # 20649410)</a>
    </h4>
(all data current as of 4/2/2014)
    <!-- the above text is hidden via a crummy hack -->
    <br>
    <div style="float: left; margin-right: 10px; width: 255px;" class="dsidx-primary-photo">
        <div> 
<!-- this is the large image I want to use as my img src, and then replace this url with the one from h4 above -->
<a href="http://1.idx-pics.diverse-cdn.com/554/20649410/0-full.jpg" target="_blank" rel="dsidx_details[20649410]" class="dsidx-photo-thumb">
                    <!-- this is the small image I want to replace -->
                <img src="http://1.idx-pics.diverse-cdn.com/554/20649410/0-medium.jpg" alt="Photo for 10 Sunny St., Irvine, CA 92612 (MLS # 20649410)" style="border: 1px solid #999999;width:250px;" />
            </a>

        </div>
    </div>

jQuery

$('.single-listing').each(function () {

// lets hold onto the listing url so we can attach it to the a element holding the image
var url = $('.dsidx-address a').attr('href');

// make sure the ancestor container is wide enough for our big image
$('.dsidx-primary-photo').css('width', '325px');

// we want to swap out the little foto in favor of the larger foto so we
// target the closest element that contains the urls to the big and small images
$('.dsidx-photo-thumb').each(function () {

    // create some vars to hold the replacement attributes
    var bigFoto = $(this).attr('href');
    // the big image has no alt, as it started as an href link. Let's reuse the little one
    var lilAlt = $(this).children().attr('alt');
    var img = $('<img/>', {
        src: bigFoto, // this works fine until I try to replace the parent href attribute with the listing url, line 31
        alt: lilAlt,
        width: 320,
        class: 'bigFoto'
    });
    // get rid of the small image
    $(this).empty();

    // now we add the new image to the <a> element
    $(this).append(img);

    // we want a click to go to the listing, not the image
    // this doesn't work, the new image inherits this url
    //$(this).attr('href', 'url'); 
});

// I tried it here, outside the each function, same result
//$('.dsidx-photo-thumb').attr('href', url);
});

CSS

.single-listing h4, .single-listing .dsidx-photos, .single-listing br, .single-listing table, .single-listing blockquote, .single-listing img:not(.bigFoto) {
    display: none;
}
.single-listing {
    float: left;
    /* crummy hack to make text not-wrapped-in-a-child-element disappear */
    font-size: 0;
    line-height: 0;
}

【问题讨论】：

标签： jquery href src

【解决方案1】：

我认为这里可能有问题：

var url = $('.dsidx-address a').attr('href');

这个可以改成

var url = $(this).find('.dsidx-address a').attr('href');

【讨论】：

不，这并没有解决 img src 问题。您可以取消注释第 31 行自己查看，img src 属性仍然更改为 href 属性。

【解决方案2】：

问题在于我的第二个嵌套函数 - 我需要使用 $(this)：

$('.dsidx-photo-thumb').each(function () {

没有用，但是这样做了：

$(this).find('.dsidx-photo-thumb').each(function () {

【讨论】：