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时，它们将淡出并在文本字段中发送相同的文本值。我需要确定单击了“ 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>

Answer 2

下面是代码示例，您可以放置该代码示例来获取被单击的列表项的类名

$(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();
    });

JavaScript类扩展了onclick函数

2 个答案: