Как назначить функцию щелчка группе

Question

У меня есть две линии цветных образцов, которые идентичны. Один набор для цвета переднего плана, а другой - для фона. Мне нужно иметь возможность выбирать один из каждой строки. Код, показанный на моей скрипке, работает на моем компьютере, за исключением того, что я использую фактические изображения. Я не знал, как это сделать со скрипкой.

При щелчке по цвету он должен быть подсвечен, чтобы показать, что он выбран. Опять же, эта часть работает на моем компьютере. Проблема в том, что когда я выбираю цвет из одной строки, а затем выбираю цвет из другой строки, первый выбранный цвет сбрасывается. Я знаю, что это связано с тем, что 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

parent().parent() использование, чтобы найти элемент в той же строке

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

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

 
div.shadow:hover { 
 
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5); 
 
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5); 
 
box-shadow: 0 0 15px rgba(61,161,210,0.5); 
 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 2

Эта строка является «отменой выбора» предыдущего выбора.

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

Может быть, вы должны изменить к:

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

Ваши изображения уже сгруппированы в основной <div>. Использование синтаксиса parent/find сделает jQuery для просмотра только внутри этой группы, а не всего корня документа.

Answer 3

Это работал только код, показанный. Но когда я добавляю еще один img над обеими группами, как показано, первые изображения выбираются и выбираются. Он не должен выбираться вообще. На странице будет много других изображений, которые также не должны отображаться как выбранные. Итак, есть ли способ ограничить функцию щелчка, чтобы просто проверить эти две группы? Вот как я изменил код:

<div><img src="outside.img"></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> 

    <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>