0

我有一个页面设置了一堆产品，你可以点击色板来改变产品的颜色。色板/产品开关全部设置有照片库插件。我只是想做到这一点，所以如果你正在看一部黑色手机，黑色样本有一类“选定”。

这是我的 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');
});
});

但这并没有做任何事情——我点击的每个图像都获得了“已选择”的类别，但该类别从未从任何其他图像中删除。

4

2 回答 2

0

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

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

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

于 2013-07-11T22:11:36.557 回答
0

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

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

反而。

于 2013-07-11T22:16:31.517 回答