Javascript 如何从分组图像输入中获取ID
这显示了两行image类型的输入。单击其中一个输入时,会将其标记为选中的Javascript 如何从分组图像输入中获取ID,javascript,jquery,image,input,Javascript,Jquery,Image,Input,这显示了两行image类型的输入。单击其中一个输入时,会将其标记为选中的。我想不出两件事: 如何查找最后选择的输入。也就是说,如果你点击黄色,然后点击红色,我需要知道黄色是之前选择的项目。我添加了一行来显示id,但它不起作用 我需要知道选择的输入是在第一组还是第二组中 有人能帮忙吗 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
。我想不出两件事:
第一组
还是第二组
中 <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>
$(“输入”)。单击(函数(){
var id=$(this.parent().parent().find(“.selected”).attr('id');
$(“#showid”).text('id='+id);
$(this.parent().parent().find(“.selected”).removeClass(“selected”);
$(此).addClass(“选定”);
});
.imgStr{display:inline block}
.所选{box shadow:0px 12px 22px 1px#333;}
div.shadow{边框:0px实心#3DA1D2;填充:10px;}
阴影:悬停{
-莫兹盒阴影:0 0 5px rgba(61161210,0.5);
-webkit盒阴影:0 0 5px rgba(61161210,0.5);
盒影:0 0 15px rgba(61161210,0.5);
}
我建议给容器赋予相同的类别(在我的示例中为container
),然后简单地使用最近的('.container')选择它们。
:
注意:同一文档中的id
应该是唯一的
希望这有帮助
var上次选择;
$(“输入”)。单击(函数(){
var current_selected=$(this).closest(“.container”).find(“.selected”);
$(“#showid”).text('previous selected='+current#u selected.attr('id'));
$(this).closest('.container').find(“.selected”).removeClass('selected');
$(此).addClass(“选定”);
});代码>
.imgStr{display:inline block}
.所选{box shadow:0px 12px 22px 1px#333;}
div.shadow{边框:0px实心#3DA1D2;填充:10px;}
阴影:悬停{
-莫兹盒阴影:0 0 5px rgba(61161210,0.5);
-webkit盒阴影:0 0 5px rgba(61161210,0.5);
盒影:0 0 15px rgba(61161210,0.5);
}
id
s在文档中应该是唯一的。
$("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");
});