使用jquery更改单击div中锚标记的css
使用jquery更改单击div中锚标记的css
提问于 2019-03-02 12:59:37
我有多个带类的div
.product_wishlist
我想更改用户在这个div中单击的特定锚标记的颜色，但是现在.pw div中的所有锚标记颜色都被更改了。是否可以将选定的css添加到单击元素中。请帮忙解决我的问题。
$(document).ready(function() {
$(document).on('click','.pw',function(e){
$('.pw > a').css('background-color', 'green');
});
});.product_wishlist > a {
background-color: #e91e63;
height: 30px;
position: absolute;
right: -32px;
text-align: center;
top: 15px;
width: 30px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
z-index: 9;
}
.wishlish-selected > a {
background-color: black;
height: 30px;
position: absolute;
right: -32px;
text-align: center;
top: 15px;
width: 30px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
z-index: 9;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="product_wishlist pw">
<a href="#" target="_blank"><i class="ti-heart"></i>Wishlist</a>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-02 13:03:06
使用this引用当前元素，并从其中引用.find()锚元素：
变化
$('.pw > a').css('background-color', 'green');至
$(this).find('a').css('background-color', 'green');
$(document).ready(function() {
$(document).on('click','.pw',function(e){
$(this).find('a').addClass('wishlish-selected')
});
});.wishlish-selected{
background-color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="product_wishlist pw">
<a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 1</a>
</div>
<div class="product_wishlist pw">
<a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 2</a>
</div>
<div class="product_wishlist pw">
<a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 3</a>
</div>
由于您已经在CSS选择器中的类之后指定了锚元素，因此不需要在jQuery中再次找到锚元素，只需将类添加到当前元素。此外，position: absolute也有一个问题，要在这里显示我忽略了该属性的输出：
$(document).ready(function() {
$(document).on('click','.pw',function(e){
$(this).addClass('wishlish-selected')
});
});.product_wishlist > a {
background-color: #e91e63;
height: 30px;
right: -32px;
text-align: center;
top: 15px;
width: 30px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
z-index: 9;
}
.wishlish-selected > a {
background-color: black;
height: 30px;
right: -32px;
text-align: center;
top: 15px;
width: 30px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
z-index: 9;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="product_wishlist pw">
<a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 1</a>
</div>
<div class="product_wishlist pw">
<a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 2</a>
</div>
<div class="product_wishlist pw">
<a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 3</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54958778
复制相关文章
相似问题
腾讯云开发者
