如何在包含触发事件的event.target的div中获取隐藏输入字段的值(Javascript)

Question

我有一组li元素，每个li元素都表示如下：

<li class="list"> <!--Parent-->
   <input type="hidden" id="id" value="3"> <!--Child 1-->
   <div class="cd-1">....</div>            <!--Child 2-->
   <div class="cd-2">                      <!--Child 3 (event trigger)-->
      <select class="reset">
         <option value="1">1</option>
         <option value="2">2</option>
      </select>
   </div>
   <div class="cd-3">                      <!--Child 4-->
</li>

我尝试过的js代码：

$('.reset').addEventListener('change', function(event) {
            if(event.target.tagName.toLowerCase() == 'select') {
                console.log($('#id').val());
     }
}

它返回第一个li元素的输入值，对于如何访问触发事件的select的li内部的输入有什么想法吗？谢谢你的帮忙!

Answer 1

您正在混合jQuery方法和普通方法(如addEventListener )。使用一种或另一种，但要保持一致

仅使用jQuery就可以执行以下操作：

​

$('select.reset').change(function(){
   // `this` is the select the event occurred on
   const hiddenVal = $(this).closest('.list').find('input:hidden').val()
   console.log('Hidden value:',hiddenVal)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="list">
   <input type="hidden" id="id" value="3">
   <div class="cd-1">....</div>
   <div class="cd-2">
      <select class="reset">
         <option value="1">1</option>
         <option value="2">2</option>
      </select>
   </div>
   <div class="cd-3">
</li>

​