Question

我设置了一系列产品的页面，您可以单击色样来更改产品的颜色。色样/产品开关都设有照片库插件。我只是试着这样做，如果你正在看黑色手机，黑色色板有一类“选择”。

这是我的HTML代码：

<div class='swatches'>
       <a href='{..}images/phones/products/droid-razr-m-black.jpg' rel='enlargeimage' rev='targetdiv:loadarea1,trigger:click,preload:yes,fx:none'><img src='{..}images/verizonspecials/phones/swatch-black.gif' alt='Black' class='selected'/></a>
       <a href='{..}images/phones/products/droid-razr-m-white.jpg' rel='enlargeimage' rev='targetdiv:loadarea1,trigger:click,preload:yes,fx:none'><img src='{..}images/verizonspecials/phones/swatch-white.gif' alt='White'/></a>
       <a href='{..}images/phones/products/droid-razr-m-blue.jpg' rel='enlargeimage' rev='targetdiv:loadarea1,trigger:click,preload:yes,fx:none'><img src='{..}images/verizonspecials/phones/swatch-blue.gif' alt='Blue'/></a>
 </div>

我在页面上有多个项目，因此样本div重复了很多次。我从这个jquery开始：

$(document).ready(function(){
$('.swatches img').click(function() {
    $('img.selected').removeClass('selected');
    $(this).addClass('selected');
});
});

但是从所有图像中删除了所选的类，而不仅仅是特定样本div中的那些图像。所以我试过这个：

$(document).ready(function(){
$('.swatches img').click(function() {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
});
});

但是这没有做任何事情 - 我点击的每个图像都获得了“选定”的类，但是这个类永远不会从任何其他图像中删除。

Answer 1

那些内部图像不是样本div的兄弟姐妹，它们是它的孩子。您还需要将“选定”添加到正确的孩子

$('.swatches').click(function(event) {
  var clicked = event.target;
  $(this).children().children().removeClass('selected');
  $(clicked).addClass('selected');
});

这应该可行，但IMO更好的解决方案是使用覆盖图像（如选择器框）和透明度的'选择'div，然后在点击时将该div的位置移动到正确的颜色，而不是分配和删除类

Answer 2

图像嵌入在锚点元素中，因此它们没有兄弟姐妹。使用

$("img", ($(this).parent().parent())[0]).removeClass('selected');

相反。

Jquery在父div中定位元素

2 个答案: