不使用指定ID的JQuery .attr()

Question

我对JQuery(和JS)非常陌生。我试图做一个非常简单的事情，它将改变我的图像属性，但由于某种原因，它不起作用。在过去的一个小时里，我一直在为这件事绞尽脑汁，我似乎找不到一个合理的理由来解释它为什么不起作用。我也尝试过$("#thumbnail-"+id).attr(...)，但它不起作用。我不知道为什么。所以我把事情分解成下面的代码，仍然不起作用。由于某些原因，属性没有改变。

，这是我的代码(我注释它是为了让事情变得更简单)：

$(".innerImage").click(function (e) {
    var imageName = ($(this).find('img').attr('src').split('/'))[2]; //returns something like 4.jpg
    var id = (imageName.split('.'))[0]; //returns just 4 (from 4.jpg)
    var thumb = "#thumbnail-"+id; //returns #thumbnail-4
    var thumbnail = 'product/thumb/'+id+'.jpg'; //returns product/thumb/4.jpg
    var full = 'product/full_size/'+id+'.jpg'; //returns product/full_size/4.jpg
    $(thumb).attr('src', thumbnail); //This is the crazy part that doesn't work
    alert(1); //Did a trace and it reached here.

});

有用的东西，但我不能用：

因此，奇怪的是，以下几点起了作用：

$('img').attr('src', 'product/thumb/test.jpg');
$('#thumbnail-4').attr('src', 'product/thumb/test.jpg'); //this worked perfect. Notice how it's just that specific id, where I didn't concatenate the 4 using the method in my code. The latter is more general

然而，上面的(后一种)一个会混淆我所有的图像，而不是我想要的具体图像，即#缩略图- id (其中id= 1，.)。有人能指出我做错了什么吗。我唯一能看到的是，它不允许我连接我的字符串并使用它们。

编辑：

<div id='imageArea-4' class='imageArea'>
    <div class='leftSide'>
            "<div class='innerImage'>
                <img src='product/thumb/4.jpg' />
            </div>


            <div class='innerImage'>
                <img src='product/thumb/4-002.jpg' />
            </div>      
    </div>

    <div class='rightSide' id='rightSide-4'>        
            <img id='thumbnail-4' src='product/thumb/4.jpg' />
            <button class='zoomImg intense' data-image='product/full_size/4.jpg' id='zoomImg-4'></button>                       
    </div>
</div>

Answer 1

看来正在发生的情况如下：

当您选择第一个图像4.jpg时，id将被设置为4。在这种情况下，您可以正确地锁定'#thumbnail-4'。但是，当您单击第二个图像4-002.jpg时，id将被设置为4-002。因此，脚本希望更新不存在的#thumbnail-4-002源。

我把这把小提琴放在一起是为了显示脱节。http://jsfiddle.net/fd2cwm8y/

我对此的建议是给thumbnail一个唯一的ID，这样它就不依赖于从单击的图像中检索的id值，就像我在这里拼凑起来的那样：http://jsfiddle.net/7qt8wzot/

我希望这能帮到你!