jQuery绑定多类点击事件问题：点击关闭按钮误改城市值如何解决？

咱们来逐个拆解你遇到的这两个问题：

问题一：如何只针对单个类绑定点击逻辑？ #

这个操作很简单，有两种实用的处理方式：

• 直接指定单个选择器：如果只想让.city-selector ul li触发修改城市文本的逻辑，直接把选择器限定为这个类即可，代码如下：

  $('.city-selector ul li').click(function() { 
    var selectedCity = $(this).text(); 
    $('.selected-city span').text(selectedCity); 
  })
  

  这样只有点击城市列表项时才会执行修改文本的操作，关闭按钮不会触发这个逻辑。

• 分开绑定独立事件：如果两个元素需要不同的行为，更推荐把它们的点击事件分开写，各自处理专属逻辑，这样代码更清晰，也能避免互相干扰：

  // 城市选项的点击逻辑
  $('.city-selector ul li').click(function() { 
    var selectedCity = $(this).text(); 
    $('.selected-city span').text(selectedCity); 
  });
  
  // 关闭按钮的点击逻辑（比如隐藏城市选择器）
  $('.city-selector-close').click(function() { 
    // 这里写你需要的关闭行为，比如隐藏选择器
    $('.city-selector').hide();
  });
  

问题二：点击关闭按钮会把选中城市改成X，怎么解决？ #

出现这个问题的核心原因是：你给两个元素绑定了同一个回调函数——不管点击的是城市选项还是关闭按钮，都会执行$('.selected-city span').text(selectedCity)这行代码，而关闭按钮的文本是X，自然就被赋值过去了。

最直观的解决方法就是上面提到的分开绑定事件，让两个元素的逻辑完全独立。如果想保留同一个事件绑定，也可以在回调里做判断，区分点击的元素类型：

$('.city-selector ul li, .city-selector-close').click(function() { 
  // 判断当前点击的是不是城市列表项
  if ($(this).is('.city-selector ul li')) {
    var selectedCity = $(this).text(); 
    $('.selected-city span').text(selectedCity); 
  } else {
    // 关闭按钮的逻辑，比如隐藏选择器
    $('.city-selector').hide();
    // 如果不需要任何操作，这里留空也可以
  }
});

不过还是更推荐分开写事件的方式，逻辑分离后后续维护起来更方便，修改其中一个的行为不会影响另一个。

最后给你整理了完整的可运行代码，还加了点交互优化：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.city-selector-close { float: right; cursor: pointer; margin-bottom: 10px; }
.city-selector ul li { cursor: pointer; list-style: none; margin: 5px 0; }
.city-selector ul li.active { color: #2196F3; font-weight: bold; }
.selected-city { margin-top: 15px; }
</style>
<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>

<script>
// 城市选项点击事件：切换选中城市并更新样式
$('.city-selector ul li').click(function() { 
  var selectedCity = $(this).text(); 
  $('.selected-city span').text(selectedCity); 
  // 同步更新选中项的样式
  $('.city-selector ul li').removeClass('active');
  $(this).addClass('active');
});

// 关闭按钮点击事件：切换城市选择器的显示/隐藏
$('.city-selector-close').click(function() { 
  $('.city-selector').toggle();
});
</script>

内容的提问来源于stack exchange，提问作者Rohit Verma