グループ化された画像入力からIDを取得する方法

Question

このjsfiddleには、タイプimageの入力が2行表示されます。入力の1つをクリックすると、selectedとマークされます。私は2つの事を理解することができません：

1. 最後に選択した入力を見つける方法を教えてください。つまり、黄色をクリックしてから赤色をクリックすると、黄色が以前に選択された項目であることを知る必要があります。私はidを表示する行を追加しましたが、うまくいきません。

2. 選択した入力がgroup_oneまたはgroup_twoであることを知る必要があります。

誰でもこれを助けることができますか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <div><img src="outside.img"></div> 

    <div id="group_one"> 
    <div class="imgStr shadow" style="background:red"><input id="enlarge" class="imgInput" name="img_front_group" value="red" type="image" src="red.gif"></div> 
    <div class="imgStr shadow" style="background:yellow"><input id="enlarge" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif"></div> 
    <div class="imgStr shadow" style="background:white"><input id="enlarge" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif"></div> 
    </div> 

    <div id="group_two"> 
    <div class="imgStr shadow" style="background:red"><input id="enlarge" class="imgInput" name="img_front_group" value="red" type="image" src="red.gif"></div> 
    <div class="imgStr shadow" style="background:yellow"><input id="enlarge" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif"></div> 
    <div class="imgStr shadow" style="background:white"><input id="enlarge" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif"></div> 
    <div id="showid"></div> 

    <script> 
     $("input").click(function(){ 

     var id = $(this).parent().parent().find(".selected").attr('id'); 
     $("#showid").text('id= '+id); 

     $(this).parent().parent().find(".selected").removeClass("selected"); 
     $(this).addClass("selected"); 
    }); 
    </script>  

    <style> 
    .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); 
    }    
    </style> 

Answer 1

は、私は、単にclosest('.container')を使用してそれらを選択し、容器に（私の例ではcontainer）同じクラスを与えることをお勧め：

$("input").click(function(){ 
    var current_selected = $(this).closest('.container').find(".selected"); 
    $("#showid").text('id= '+current_selected.attr('id')); 

    $(this).closest('.container').find(".selected").removeClass('selected'); 
    $(this).addClass("selected"); 
}); 

注：idは同じドキュメント内で一意でなければなりません。

これが役に立ちます。

var last_selected; 
 

 
$("input").click(function(){ 
 
    var current_selected = $(this).closest('.container').find(".selected"); 
 
    $("#showid").text('previous selected = '+current_selected.attr('id')); 
 

 
    $(this).closest('.container').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><img src="outside.img"></div> 
 

 
<div class='container' id="group_one"> 
 
    <div class="imgStr shadow" style="background:red"> 
 
    <input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif"> 
 
    </div> 
 
    <div class="imgStr shadow" style="background:yellow"> 
 
    <input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif"> 
 
    </div> 
 
    <div class="imgStr shadow" style="background:white"> 
 
    <input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif"> 
 
    </div> 
 
</div> 
 

 
<div class='container' id="group_two"> 
 
    <div class="imgStr shadow" style="background:red"> 
 
    <input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif"> 
 
    </div> 
 
    <div class="imgStr shadow" style="background:yellow"> 
 
    <input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif"> 
 
    </div> 
 
    <div class="imgStr shadow" style="background:white"> 
 
    <input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif"> 
 
    </div> 
 
    <div id="showid"></div>