J'ai la liste d'éléments / articles suivante:
<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>
et je veux à chaque fois que je clique sur le div avec la classe "hotdeal-tag" pour ajouter une nouvelle classe ".show-me" dessus. Le problème avec mon code, tel qu'il est maintenant, est que lorsque je clique sur le div "hotdeal-tag", il affiche les trois divs "popup-tip". Comme je suis nouveau dans jquery, je ne peux pas comprendre ce que je fais de mal.
Voici mon extrait de code:
$( ".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>Et voici le JSFIDDLE
Parce que vous interrogez tous les .popup-tips avec $ ('. Popup-tip'), vous pouvez utiliser le sélecteur de frères sur le div cliqué pour ajouter une classe au .popup-tip de votre choix.
$( ".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>Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots