jquery - 使用 jquery 单击 div 时如何向元素添加特定类？

Question

我有以下元素/元素列表:

<div class="list-item">
<div class="store-name">Apple</div>
<div class="hotdeal-tag">%</div>
<div class="popup-tip">10% OFF</div>
</div>

<div class="list-item">
<div class="store-name">Microsoft</div>
<div class="hotdeal-tag">%</div>
<div class="popup-tip">10% OFF</div>
</div>

<div class="list-item">
<div class="store-name">Linux</div>
<div class="hotdeal-tag">%</div>
<div class="popup-tip">10% OFF</div>
</div>

我希望每次单击带有“hotdeal-tag”类的 div 时都在其上添加一个新类“.show-me”。我的代码现在的问题是，当我单击“hotdeal-tag”div 时，它会显示所有三个“popup-tip”div。由于我是 jquery 新手，我无法弄清楚我做错了什么。

这是我的代码片段:

$( ".list-item" ).each(function() {
    $('.hotdeal-tag').on("click", function(){
		$('.popup-tip').toggleClass('show-me');
	});
   });

.list-item {
  width:80%;
  margin-bottom:10px;
  padding:10px;
  background:#eee;
  position:relative;
  overflow:hidden;
}

.store-name {
  display:inline-block;
  float:left;
}

.hotdeal-tag {
  width:25px;
  height:25px;
  text-align:center;
  line-height:20px;
  background:red;
  color:#fff;
  border-radius:4px;
  font-weight:bold;
  float:right;
  cursor:pointer;
}

.popup-tip {
  position:absolute;
  right:45px;
  font-weight:bold;
  font-size:11px;
  top:12px;
  padding:3px;
  background:#fff;
  border-radius:4px;
  display:none;
}

.show-me {
  display:block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="list-item">
<div class="store-name">Apple</div>
 <div class="hotdeal-tag">%</div>
 <div class="popup-tip">20% OFF</div>
</div>

<div class="list-item">
<div class="store-name">Microsoft</div>
 <div class="hotdeal-tag">%</div>
 <div class="popup-tip">10% OFF</div>
</div>

<div class="list-item">
<div class="store-name">Linux</div>
 <div class="hotdeal-tag">%</div>
 <div class="popup-tip">35% OFF</div>
</div>

这是 JSFIDDLE

Answer 1

因为您正在使用 $('.popup-tip') 查询所有 .popup-tips，所以您可以在单击的 div 上使用同级选择器将类添加到您想要的 .popup-tip。

$( ".list-item" ).each(function() {
    $('.hotdeal-tag').on("click", function(){
		$(this).siblings('.popup-tip').toggleClass('show-me');
	});
   });

.list-item {
  width:80%;
  margin-bottom:10px;
  padding:10px;
  background:#eee;
  position:relative;
  overflow:hidden;
}

.store-name {
  display:inline-block;
  float:left;
}

.hotdeal-tag {
  width:25px;
  height:25px;
  text-align:center;
  line-height:20px;
  background:red;
  color:#fff;
  border-radius:4px;
  font-weight:bold;
  float:right;
  cursor:pointer;
}

.popup-tip {
  position:absolute;
  right:45px;
  font-weight:bold;
  font-size:11px;
  top:12px;
  padding:3px;
  background:#fff;
  border-radius:4px;
  display:none;
}

.show-me {
  display:block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="list-item">
<div class="store-name">Apple</div>
 <div class="hotdeal-tag">%</div>
 <div class="popup-tip">20% OFF</div>
</div>

<div class="list-item">
<div class="store-name">Microsoft</div>
 <div class="hotdeal-tag">%</div>
 <div class="popup-tip">10% OFF</div>
</div>

<div class="list-item">
<div class="store-name">Linux</div>
 <div class="hotdeal-tag">%</div>
 <div class="popup-tip">35% OFF</div>
</div>