リストから隠された入力の正しい値を取得

私はいくつかの親とその子のリストを持っています。私の目標は、いずれかのリストをクリックすると隠れた入力値を取得することですが、問題はすべてのアイテムの単一の値だけを取得することです。私は非表示の入力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を使用しているため、クリックイベントが発生するたびに最初の場所のidを持つe値が警告されます。あなたは.pか.cクラス内のIDを見つける必要があり、それはまた、あなたはそれを得ることができる要素

 $(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を使用することは一度も言及していません。そして、はい、彼は重複IDを使用すべきではありません –

あなたは.Pクラス内のIDを見つける必要があり、また、IDが一意であることになっている、あなたの代わりにクラスを使用することができます。

$(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

の現在のインスタンスを参照するために$(this).find()

thisキーワードを使用することによって達成することができますこの値のようなもので

$('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

リストから隠された入力の正しい値を取得

答えて

関連する問題