javascript - JavaScript类扩展了onclick函数

我在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时，它们将淡出并在文本字段中发送相同的文本值。我需要确定单击了“ boo”或“ foo”的李，然后在文本字段中发送特定的值。
请帮帮我..

最佳答案

您可以使用.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>