Question

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

的链接

源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;
}

Answer 1

我认为这里可能有问题：

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

这可以改为

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

Answer 2

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

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

没有用，但是这样做了：

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

如何替换链接URL而不会弄乱图像src属性

2 个答案: