父 div 中的 Jquery 定位元素答案

【问题标题】：Jquery targeting elements within parent div父 div 中的 Jquery 定位元素
【发布时间】：2013-07-12 06:17:19
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

相反。

【讨论】：

这似乎并没有删除类，当我点击一个新图像时，它只是添加了类而不从上一个图像中删除它。

【解决方案2】：

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

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

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

【讨论】：

'.swatches img' 选择器引用了 img 元素。
不幸的是，这并没有做任何事情， selected 的类没有被添加或删除。