Jquery 多个名称相同的div和s forms_Jquery_Html

Jquery 多个名称相同的div和s forms

jquery html

Jquery 多个名称相同的div和s forms,jquery,html,Jquery,Html,我有一个multiples divs，我想知道如何检测我单击的div并从我单击的div中获取值输入 <div class="Offers"> <div class="txt"> </div> <div class="map"> <form id="vmap" method="post"> <input type=hidden id=idship value=64>

我有一个multiples divs，我想知道如何检测我单击的div并从我单击的div中获取值输入

<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
    <form id="vmap" method="post">
        <input type=hidden id=idship value=64>
        <input type=hidden id=iddate value=1254>
        <button>View Map</button>
    </form>
    </div>
</div>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
        <form id="vmap" method="post">
            <input type=hidden id=idship value=65>
            <input type=hidden id=iddate value=1255>
            <button>View Map</button>
        </form>
    </div>
</div>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
        <form id="vmap" method="post">
            <input type=hidden id=idship value=66>
            <input type=hidden id=iddate value=1256>
            <button>View Map</button>
        </form>
    </div>
</div>


视图地图
视图地图
视图地图

如何检测我单击的div并从输入中获得正确的值？

html5规范说

id属性指定其元素的唯一标识符（id）。这个值在元素的主子树中的所有ID中必须是唯一的并且必须至少包含一个字符。该值不能包含任何空格字符

如果您使每个id都是唯一的，那么很容易在jquery中使用

$（“#ID here”）.val（）


视图地图
视图地图
视图地图
$（函数（）{
$（“.Offers.map按钮”）。在（'click'，function（）上{
var form=$（this.parent（“form”）；
var idship=form.find（'#idship'）.val（）；
var iddate=form.find（'#iddate'）.val（）；
警报（idship+“-----------”+iddate）；
});
});

以下是解决方案


$（文档）.ready（函数（）{
$（'.map'）。单击（函数（）{
var input1=$（this）.find（'input#idship'）.val（）；
var input2=$（this）.find（'input#iddate'）.val（）；
警报（“输入1-”+输入1+“输入2-”+输入2）；
});		
});

视图地图
视图地图
视图地图
脚本在哪里？重复的id。。。无效的HTML。
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
    <form id="vmap" method="post">
        <input type=hidden id=idship value=64>
        <input type=hidden id=iddate value=1254>
        <button>View Map</button>
    </form>
    </div>
</div>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
        <form id="vmap" method="post">
            <input type=hidden id=idship value=65>
            <input type=hidden id=iddate value=1255>
            <button>View Map</button>
        </form>
    </div>
</div>
<div class="Offers">
    <div class="txt">
    </div>
    <div class="map">
        <form id="vmap" method="post">
            <input type=hidden id=idship value=66>
            <input type=hidden id=iddate value=1256>
            <button>View Map</button>
        </form>
    </div>
</div><script src="https://code.jquery.com/jquery-2.2.4.js"  type="text/javascript"></script> 

<script>
$(function () {

$(".Offers .map button").on('click', function() {
    var form=$(this).parent("form");
    var idship =form.find('#idship').val();
    var iddate =form.find('#iddate').val();
    alert(idship +"---------"+iddate);
  });


});
</script>
</body>
</html>