如果我使用 jquery 一起使用两个类,我该如何使用它?

我必须选择两个班级,但是如果我只想将它用于单个班级,我该如何使用它?如下所示:-


$('.city-selector ul li, .city-selector-close').click(function() {

  var selectedCity = $(this).text();

  $('.selected-city span').text(selectedCity);

})

.city-selector-close {

  float: right;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="city-selector-close">X</div>

<div class="city-selector">

  <ul>

    <li class="active">Gurgaon</li>

    <li>Delhi</li>

    <li>Noida</li>

    <li>Faridabad</li>

  </ul>

</div>

<div class="selected-city"><span>Gurgaon</span></div>

在上面的示例中,一切正常,就像我想选择的城市一样。我可以选择但是当我一起选择两个班级时有一个问题.city-selector ul li, .city-selector-close,我只想获得点击班级的文本

仍然一切正常,但是当我点击关闭时,它也会像选定的城市一样工作 如何用这种方法解决这个问题?


蝴蝶刀刀
浏览 219回答 3
3回答

尚方宝剑之说

这听起来像你想描述什么是两个独立的点击处理程序。一种用于单击城市,一种用于单击 X:$('.city-selector ul li').click(function() {&nbsp; var selectedCity = $(this).text();&nbsp; $('.selected-city span').text(selectedCity);})$('.city-selector-close').click(function() {&nbsp; $('.selected-city span').text('');}).city-selector-close {&nbsp; float: right;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="city-selector-close">X</div><div class="city-selector">&nbsp; <ul>&nbsp; &nbsp; <li class="active">Gurgaon</li>&nbsp; &nbsp; <li>Delhi</li>&nbsp; &nbsp; <li>Noida</li>&nbsp; &nbsp; <li>Faridabad</li>&nbsp; </ul></div><div class="selected-city"><span>Gurgaon</span></div>将所有内容压缩为单击处理程序或单个函数是不必要的,甚至是明智的。你的元素做两件不同的事情,所以有两个不同的功能。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript