Jquery在父div中定位元素

时间:2013-07-11 22:05:26

标签: jquery

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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

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

相反。