Question

我在点击缩略图时试图更改大图像

$("#thumbnails a").click(function(){                
                 $id = $(this).attr("id");
                 $("#large-img img" . $id).addClass("active");      
                 return false;
            });

HTML：

<div id="large-img">
        <img src="1.jpg" alt="" title="" id="yes" style="display: none;"/>        
        <img src="2.jpg" alt="" title="" id="no" style="display: none;"/>
</div>

<div id="thumbnails">
            <a href="#" id="yes">
                <img src="1_small" alt="" title="" width="76" height="76"/>
            </a>
            <a href="#" id="no">
                <img src="2_small.jpg" alt="" title="" width="76" height="76"/>    
            </a>
</div>

这是我的旧代码，但你不能淡出它。我想达到同样的目的。

$('#thumbnails a').click(function(){
                $('#large-img').css('background-image', 'url(' + $img + ')');
                $('#medium-img').css('background-image', 'url(' + $img + ')');              
            return false;
        });

Answer 1

$("#thumbnails a").click(function(){                
                 var id = $(this).attr("id");
                 $('#large-img').find('#'+id).addClass("active");      
                 return false;
            });

Answer 2

您不能拥有多个具有相同ID的元素，但您肯定会重载a元素的标题或名称。然后你只需要一个#符号并为Javascript使用正确的字符串连接符。

扰流警报

JS：

$("#thumbnails a").click(function(e){
    e.preventDefault();                
    id = $(this).attr("name");
    $("#large-img img#" + id).addClass("active");      
});

HTML：

<div id="large-img">
    <img src="1.jpg" alt="" title="" id="yes" style="display:none;"/>        
    <img src="2.jpg" alt="" title="" id="no" style="display:none;"/>
</div>
<div id="thumbnails">
    <a href="#" name="yes"><img src="1_small" alt="" title="" width="76" height="76"/></a>
    <a href="#" name="no"><img src="2_small.jpg" alt="" title="" width="76" height="76"/></a>
</div>

Answer 3

请尝试：

$("#large-img img#" + id).addClass("active");

单击jQuery更改大图像

3 个答案: