从列表中的隐藏输入中获取正确的值

我有一些父母及其孩子的列表。我的目标是当我点击任何一个列表时，它将获取其隐藏的输入值，但问题在于它仅抓取所有项目的单个值。我正在使用隐藏的输入ID来选择项目。我在这里做什么错了？我还使用了一个类来输入，但仍然不起作用。任何想法？从列表中的隐藏输入中获取正确的值

 $(document).ready(function() { 
 

 
     $(".p").click(function() { 
 
      var z = $("#pid").val(); 
 
      alert(z); 
 
     }) 
 

 
     $(".c").click(function() { 
 
      var z = $("#cid").val(); 
 
      alert(z); 
 
     }) 
 

 
    });

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>Just test</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/> 
 

 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css"> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script> 
 

 
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script> 
 

 
    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script> 
 

 

 
    </head> 
 
    <body> 
 

 
<div class="List"> 
 
    <div class="parents"> 
 
     <h4 class="p"> 
 
      <a href="#"> 
 
       <u> 
 
       <input type="hidden" name="pid" id="pid" value="1"> 
 
        <b>Parents text 1</b> 
 
       </u> 
 
      </a> 
 
     </h4> 
 
     <div class="child"> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0001"> 
 
         <b>Child text 1</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0002"> 
 
         <b>Child text 2</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
     </div> 
 
    </div> 
 
    <div class="parents"> 
 
     <h4 class="p"> 
 
      <a href="#"> 
 
       <u> 
 
       <input type="hidden" name="pid" id="pid" value="2"> 
 
        <b>Parents text 2</b> 
 
       </u> 
 
      </a> 
 
     </h4> 
 
     <div class="child"> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0003"> 
 
         <b>Child text 1</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0004"> 
 
         <b>Child text 2</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
    </body> 
 
    </html>

来源

2017-10-13 John Lk

ID应该是唯一使用类，而不是这种情况下，比如'$（本）.find（ 'PID'）'或'$（本）.find（ 'CID'）' – guradio

由于您对所有字段使用相同的ID，所以无论何时触发点击事件th带有ID的e值将在第一时间发出警报。你必须找到.p或.c类中的ID和可以利用$(this).find()

this关键字来引用元素的当前实例来实现

 $(document).ready(function() { 
 

 
     $(".p").click(function() { 
 
      var z = $(this).find("#pid").val(); 
 
      alert(z); 
 
     }) 
 

 
     $(".c").click(function() { 
 
      var z = $(this).find("#cid").val(); 
 
      alert(z); 
 
     }) 
 

 
    });

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>Just test</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/> 
 

 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css"> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script> 
 

 
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script> 
 

 
    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script> 
 

 

 
    </head> 
 
    <body> 
 

 
<div class="List"> 
 
    <div class="parents"> 
 
     <h4 class="p"> 
 
      <a href="#"> 
 
       <u> 
 
       <input type="hidden" name="pid" id="pid" value="1"> 
 
        <b>Parents text 1</b> 
 
       </u> 
 
      </a> 
 
     </h4> 
 
     <div class="child"> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0001"> 
 
         <b>Child text 1</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0002"> 
 
         <b>Child text 2</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
     </div> 
 
    </div> 
 
    <div class="parents"> 
 
     <h4 class="p"> 
 
      <a href="#"> 
 
       <u> 
 
       <input type="hidden" name="pid" id="pid" value="2"> 
 
        <b>Parents text 2</b> 
 
       </u> 
 
      </a> 
 
     </h4> 
 
     <div class="child"> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0003"> 
 
         <b>Child text 1</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0004"> 
 
         <b>Child text 2</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
    </body> 
 
    </html>

来源

2017-10-13 05:58:09

不建议去与重复的ID。 –

我刚才提到他缺少的东西。我从来没有提到要使用重复的ID：p。是的，他不应该使用重复的ID –

你必须找到.P类中的ID，也IDS应该是唯一的，你可以使用类代替：

$(document).ready(function() { 
 

 
     $(".p").click(function() { 
 
      var z = $(this).find("#pid").val(); 
 
      alert(z); 
 
     }) 
 

 
     $(".c").click(function() { 
 
      var z = $(this).find("#cid").val(); 
 
      alert(z); 
 
     }) 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>Just test</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/> 
 

 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css"> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script> 
 

 
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script> 
 
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script> 
 

 
    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script> 
 

 

 
    </head> 
 
    <body> 
 

 
<div class="List"> 
 
    <div class="parents"> 
 
     <h4 class="p"> 
 
      <a href="#"> 
 
       <u> 
 
       <input type="hidden" name="pid" id="pid" value="1"> 
 
        <b>Parents text 1</b> 
 
       </u> 
 
      </a> 
 
     </h4> 
 
     <div class="child"> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0001"> 
 
         <b>Child text 1</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0002"> 
 
         <b>Child text 2</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
     </div> 
 
    </div> 
 
    <div class="parents"> 
 
     <h4 class="p"> 
 
      <a href="#"> 
 
       <u> 
 
       <input type="hidden" name="pid" id="pid" value="2"> 
 
        <b>Parents text 2</b> 
 
       </u> 
 
      </a> 
 
     </h4> 
 
     <div class="child"> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0003"> 
 
         <b>Child text 1</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
      <h6 class="c"> 
 
       <a href="#"> 
 
        <u> 
 
        <input type="hidden" name="cid" id="cid" value="0004"> 
 
         <b>Child text 2</b> 
 
        </u> 
 
       </a> 
 
      </h6> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
    <script> 
 

 
     
 
    </script> 
 

 
    </body> 
 
    </html>

来源

2017-10-13 05:56:14 JosephC

你也可以把它通过它的价值是这样的

$('select').change(function() { 
 
    a = $('select > option:selected').text(); 
 
    $('ul>li').css('visibility', 'hidden') 
 
    $("ul > li[value='" + a + "']").css('visibility', 'visible'); 
 
});

.Hidden { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class='Hidden' value='grab1'>grab1</li> 
 
    <li class='Hidden' value='grab2'>grab2</li> 
 
    <li class='Hidden' value='grab3'>grab3</li> 
 
    <li class='Hidden' value='grab4'>grab4</li> 
 
    <li class='Hidden' value='grab5'>grab5</li> 
 
    <li class='Hidden' value='grab6'>grab6</li> 
 
</ul> 
 
<select> 
 

 
<option>grab1</option> 
 
<option>grab2</option> 
 
<option>grab3</option> 
 
<option>grab4</option> 
 
<option>grab5</option> 
 
<option>grab6</option> 
 
</select>

来源

2017-10-13 06:06:35

从列表中的隐藏输入中获取正确的值

回答

相关问题