從列表中的隱藏輸入中獲取正確的值

我有一些父母及其孩子的列表。我的目標是當我點擊任何一個列表時，它將獲取其隱藏的輸入值，但問題在於它僅抓取所有項目的單個值。我正在使用隱藏的輸入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

從列表中的隱藏輸入中獲取正確的值

回答

相關問題