목록의 숨겨진 입력에서 정확한 값을 가져옵니다.

나는 부모 목록과 그 자녀 목록을 가지고 있습니다. 내 목표는 목록 중 하나를 클릭하면 숨겨진 입력 값을 얻지 만 문제는 모든 항목에 대해 하나의 값만 가져 오는 것입니다. 숨겨진 입력 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를 사용하므로 click 이벤트가 발생할 때마다 th 첫 번째 장소에서 ID가있는 e 값이 경고됩니다. 또한

 $(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를 찾을 수있다, 또한 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

당신이 그것을 얻을 수 있습니다 당신은 .p 또는 .c 클래스 내 ID를 찾아 내야하고 그 요소의 현재 인스턴스를 참조 할 $(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

목록의 숨겨진 입력에서 정확한 값을 가져옵니다.

답변

관련 문제