Question

我有一个倍数div，我想要如何检测我点击的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并从输入中获取正确的值？

Answer 1

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

Answer 2

html5规范说

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

如果你使每个id都是唯一的，那么很容易通过

选择你想要的jquery

$("#ID-here").val()

Answer 3

这是解决方案

＆＃13;

  
$(document).ready(function(){
$('.map').click(function(){
	var input1 = $(this).find('input#idship').val();
	var input2 = $(this).find('input#iddate').val();
	alert("input1 - "+input1+" input2 - "+input2);
});		
});

＆＃13;

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

＆＃13;

具有相同名称的多个div具有表单

3 个答案: