jquery - 如何为组分配点击功能

Question

我有两行相同的色样。一组用于前景色，另一组用于背景。我需要能够从每一行中选择一个。我的 fiddle 中显示的代码可以在我的计算机上运行，​​但我使用实际图像。我不知道如何用 fiddle 做到这一点。

当单击某种颜色时，它应该突出显示以表明它已被选中。同样，这部分可以在我的计算机上运行。问题是，当我从一行中选择一种颜色，然后从另一行中选择一种颜色时，第一个选定的颜色将被重置。我知道这是因为 jquery 正在查看所有图像，但我不知道如何对它们进行分组，以便可以将每个图像中的颜色显示为选定的。

如果它有所不同，我实际上希望它能够处理图像类型的输入，但是在我完成它的过程中这更容易实现，所以我选择了该方法。有人可以解释一下需要什么吗？ jsfiddle

    .imgStr {display:inline-block }
    .selected{ box-shadow:0px 12px 22px 1px #333;}
    div.shadow { 
    border: 0px solid #3DA1D2;
    padding: 10px;
    }

    <div>
    <div class="imgStr shadow" style="background:red"><img src="someimg.jpg"> </div>
    <div class="imgStr shadow" style="background:yellow"><img src="someimg.jpg"> </div>
    <div class="imgStr shadow" style="background:white"><img src="someimg.jpg"> </div>
    </div>

    <div>
    <div class="imgStr shadow" style="background:red"><img src="someimg.jpg"> </div>
    <div class="imgStr shadow" style="background:yellow"><img src="someimg.jpg"> </div>
    <div class="imgStr shadow" style="background:white"><img src="someimg.jpg"> </div>
    </div>

    $("img").click(function(){
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    });

Answer 1

此行“取消选择”之前的选择。

$(".selected").removeClass("selected");

也许你应该更改为:

$(this).parent().parent().find(".selected").removeClass("selected");

您的图像已按主要类别 <div> 分组。 。使用父/查找语法将使 jQuery 只查找该组内部而不是整个文档根。