從jquery中獲取li的選定值

Question

使用jquery查找點擊事件的值。每次單擊delete類時，hidden變量將返回第一個hdid而不是點擊hdid。當我使用this時，它返回整個delete類，但我只需要select類的'hdid'。現在的問題是我如何使用this的變量設置爲所選hdid

<form id="frmDelete" method="post" action="delete-class.php"> 
      <ul id="class"> 
       <li> 
        <div class="delete">ED 123-123<input type="hidden" name="hdid" id="hdid" value="6"/></div> 
       </li> 
       <li> 
        <div class="delete">EDU 121-101<input type="hidden" name="hdid" id="hdid" value="7"/></div> 
       </li> 
       <li> 
        <div class="delete">STU 120-456<input type="hidden" name="hdid" id="hdid" value="8"/></div> 
       </li>    
      </ul> 
     </form> 
    </div> 
    <script> 
     $(function() { 
      $(".delete").click(function() { 
       var hidden = $('#hdid').val(); 
       console.log(hidden); 
       console.log(this); 
      }); 
     }); 
    </script> 

Answer 1

$(function() { 
     $(".delete").click(function() { 
      var hidden = $(this).find("hidden").val(); 
      console.log(hidden); 
     }); 
    }); 

和ID應該是唯一的

Answer 2

$(function() { 
    $(".delete").click(function() { 
     var $div = $(this); 
     console.log($div.children("input").prop("name")); 
    }); 
}); 

Answer 3

你必須在同一頁上與ID hdid多個元素。具有相同ID的多個元素並不是一個好主意。

由於您正在使用$('#hdid')來搜索元素，因此您總能找到第一個。

Answer 4

id=""應該是唯一的，如果你想要多一個元素爲hdid使用class屬性。這是造成你的問題。所以「修復」的HTML要像

<div class="delete">ABC<input type="text" name="hdid1" class="hdid" /> 

和JS喜歡

$(function() {    
    $(".delete").click(function() {     
     var hidden = $(this).children('input.hdid').val();     
     console.log(hidden);     
     console.log(this);    
    });   
}); 

Answer 5

你的問題是，你必須使用相同ID的多個元素。這不是真的允許的，所以當被問及ID爲「hdid」的元素的值時，jQuery將只取其找到的第一個值。

這裏的一個可能的解決方案是隻有一個隱藏的輸入字段，並在點擊某個特定項目時更新此值，然後提交表單。你可以存放物品的ID，你要使用data-*屬性（假設你使用HTML 5）刪除：

<form id="frmDelete" method="post" action="delete-class.php"> 
    <input type="hidden" name="hdid" id="hdid" /> 
    <ul id="class"> 
     <li> 
      <div class="delete" data-id="6">ED 123-123</div> 
     </li> 
     <li> 
      <div class="delete" data-id="7">EDU 121-101</div> 
     </li> 
     <li> 
      <div class="delete" data-id="8">STU 120-456</div> 
     </li>    
    </ul> 
</form> 

<script> 
    $(function() { 
     $(".delete").click(function() { 
      $('#hdid').val($(this).data('id')); 
      var hidden = $('#hdid').val(); 
      console.log(hidden); 
      console.log(this); 
     }); 
    }); 
</script>