Question

jquery怎么实现点击子标签里面的链接改变父标签样式

jquery如何实现当点击.link 里面的a链接给.content 添加一个新class .new，点击过后class.new消失

点击a的时候:添加class .new

<div class="content new">
<div class="link">
<a href="#">链接</a>

</div>
</div>

点击a过后:去掉class .news

<div class="content">
<div class="link">
<a href="#">链接</a>
</div></div>

Answer 1

示例如下：

<div id="parent">
    父标签
    <div id="children">
        子标签
    </div>
</div>

$('#children').click(function(){
    $(this).parent().css('color','red');
});

上面代码会在点击子标签后将父标签的文字变为红色（由于color的继承性，子标签的颜色也会改变）

解释：

click可以为元素绑定click事件，点击时会调用此函数

parent方法可以获取当前元素的父级元素

css方法可以设置指定元素的样式，设置的样式会添加的元素的style属性中

Answer 2

$("a").click(function(){
$(this).parents(".content").removeClass("new");
});

追问

自己测试后没有效果

Answer 3

$("a").mousedown(function(){
$(this).parents(".content").addClass("new");
});
$("a").mouseup(function(){
$(this).parents(".content").removeClass("new");
});

追问

不好意思，自己的错误，你写的是对的

追答

写JQuery的时候最好用FF调试，比较方便。可以定位到有问题的JS代码

Answer 4

var $contents = $(".content");
for(var i=0; i<$contents.length; i++){
var $content = $contents.eq(i);

var $a = $content.find("a");

$a.mousedown(function(){

$content.addClass("new");

}).mouseup(function(){

$content.removeClass("new");

});

}

追问

自己测试后没有效果

追答

我测试了，是有效果的，鼠标点击不放增加class，鼠标抬起class消失。
还有一种可能就是你表达的不正确，
你的意思是不是鼠标滑过和鼠标滑出时的效果啊？

追问

多谢，例子是正确的，我刚才是样式没加对，对不起对不起