首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript类扩展了onclick函数

JavaScript类扩展了onclick函数
EN

Stack Overflow用户
提问于 2018-07-06 04:08:13
回答 2查看 32关注 0票数 0

我在onclick函数上遇到了一个ajax问题。在html中

代码语言:javascript
复制
<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中

代码语言: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’,并在文本字段中发送特定值。请帮帮我..

EN

回答 2

Stack Overflow用户

发布于 2018-07-06 04:12:35

您可以使用.closest查找最冷的父类,然后使用.attr("class")获取类名,如下所示

代码语言:javascript
复制
$("li").click(function(){
  console.log($(this).closest("div").attr("class"))
})
代码语言:javascript
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2018-07-06 04:13:59

下面是代码示例,您可以将其用于获取单击的列表项的类名

代码语言:javascript
复制
$(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();
        });
代码语言:javascript
复制
<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>

在这两个函数中尝试执行以下操作:

代码语言:javascript
复制
 $(document).on('click','li',function(){
        $(this).parent().parent().prop('class');
        $('#metro').val($(this).text());
        $('#areastatus').fadeOut();
    });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51199108

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档