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-tip，所以可以在单击的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>

Answer 2

您在这里不需要每个，我想试试这个。

$(function(){
    $('.hotdeal-tag').click(function(event) {
        $(this).next().toggleClass('show-me');
    });
  })

Answer 3

我不确定我每个人都了解外表。

这个应该足够了。

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

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

3 个答案: