JavaScript 类扩展了 onclick 函数

Question

我在 onclick 函数上遇到 ajax 问题。 在 HTML 中

<div>
  <input type="text" id="metro" placeholder="Area">
  <div id="areastatus"></div>
</div>
<div class="boo">
  <ul>
    <li>KHULNA</li>
    <li>KUSHTIA</li>
  </ul>
</div>
<div>
  <input type="text" id="keyword" placeholder="Area">
  <div id="keystatus"></div>
</div>
<div class="foo">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

在 JavaScript 中

$(document).on('click', 'li', function() {
  $('#metro').val($(this).text());
  $('#areastatus').fadeOut();
});
$(document).on('click', 'li', function() {
  $('#keyword').val($(this).text());
  $('#keystatus').fadeOut();
});

在这里，当单击任何 li 时，这些 li 就会淡出并在文本字段中发送相同的文本值。我需要确定谁的 li 被点击了“boo”或“foo”，并在文本字段中发送特定值。 请帮帮我..

Answer 1

您可以使用.closest找到最好的父级，然后使用 .attr("class") 获取类名，例如

$("li").click(function(){
  console.log($(this).closest("div").attr("class"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
 <input type="text" id="metro" placeholder="Area"> 
 <div id="areastatus"></div>
</div>

<div class="boo">
 <ul>
  <li>KHULNA</li>
  <li>KUSHTIA</li>
 </ul>
</div>
<div>
 <input type="text" id="keyword" placeholder="Area"> 
 <div id="keystatus"></div>
</div>
<div class="foo">
 <ul>
  <li>one</li>
  <li>two</li>
 </ul>
</div>