Класс JavaScript расширяется функцией onclick

Question

У меня возникла проблема с функцией ajax onclick. В 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 нажал 'boo' или 'foo' и отправить конкретное значение в текстовое поле. пожалуйста, помогите мне ..

Answer 1

Ниже приведен пример кода, который вы можете поставить, чтобы получить имя класса для элемента списка, по которому щелкают

$(document).on('click','li',function(){
                    
            alert($(this).parent().parent().prop('class'));
            $('#metro').val($(this).text());
            $('#areastatus').fadeOut();
        });
$(document).on('click','li',function(){

            alert($(this).parent().parent().prop('class'));
            $('#keyword').val($(this).text());
            $('#keystatus').fadeOut();
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

Попробуйте это в обеих функциях:

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

Answer 2

Вы можете использовать .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>