Question

此jsfiddle显示两行输入类型为image的图像。单击其中一个输入时，会将其标记为selected。我无法弄清楚两件事：

如何找到上次选择的输入。也就是说，如果你点击黄色然后点击红色，我需要知道黄色是以前选择的项目。我添加了一行来显示id，但它不起作用。
我需要知道所选的输入位于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

我建议为容器提供相同的类（在我的示例中为container），然后使用closest('.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>

如何从分组图像输入中获取ID

1 个答案: