我目前有一个3列文档,每列的页脚都是一个换色器,它改变了段落文本的颜色,我相信这很简单,但它应该只改变父div的颜色,在代码改变了页面上的所有段落。
代码:
$('a.text_blue').click(function() {
$('p').removeAttr('class').addClass('blue_text');
});
$('a.text_red').click(function() {
$('p').removeAttr('class').addClass('red_text');
});
$('a.text_black').click(function() {
$('p').removeAttr('class').addClass('black_text');
});
HTML看起来像这样:
<div class="colour_changer">
<a href="#" class="text_blue"></a>
<a href="#" class="text_red"></a>
<a href="#" class="text_black"></a>
</div>
如果您需要查看CSS,请告诉我。
提前致谢。
答案 0 :(得分:3)
根据您的澄清评论,您可以使用siblings
获取p
元素的兄弟姐妹a
元素。由于它的声音,他们共享一个父母,这应该工作:
$('a.text_blue').click(function() {
$(this).siblings('p').removeAttr('class').addClass('blue_text');
});
如果你减少了问题的标记,而且他们不是真正的兄弟姐妹,你可以使用parent
前往div
,然后find
来获得后代p
元素:
$('a.text_blue').click(function() {
$(this).parent().find('p').removeAttr('class').addClass('blue_text');
});
另外,您可以重写代码,这样就不必将单独的事件处理程序绑定到每个a
元素。你可以这样做:
<a href="#" data-class="blue-text"></a>
然后委托事件处理程序:
$(".color_changer").on("click", "a", function() {
$(this).parent().find("p").removeAttr("class").addClass($(this).data("class"));
});
<强>更新强>
既然您已经发布了代码链接,我可以给您一个明确的答案!您需要定位的p
元素是父div
的兄弟:
$('a.text_blue').click(function() {
$(this).parent().siblings('p').removeAttr('class').addClass('blue_text');
});
由于你使用的是jQuery 1.6,你仍然可以通过delegate
方法从事件委派中受益:
$(".color_changer").delegate("a", "click", function() {
$(this).parent().siblings('p').removeAttr("class").addClass($(this).data("class"));
});
答案 1 :(得分:1)
这种情况正在发生,因为您正在查看页面中的所有段落。 给你想要id的段落,然后选择
$('#yourparagraph').removeAttr('class').addClass('red_text');
或者你可以使用课程
$('.yourclass').removeAttr('class').addClass('red_text');
取决于您的需求。
然而你的问题不是很清楚,这可能与你想要的不同,因为我在你的代码中看不到
标签,但一般来说你必须告诉jQuery你想要你的代码到哪个元素应用于。当简单的写p标签时,它会影响整个页面。
答案 2 :(得分:0)
在您的JS中,您将点击事件绑定到所有带
的段落$('p').removeAttr('class').addClass('red_text');
这是抓取页面上的每个p元素(因此,每个div中的每个p)。
给每个父div一个id,然后更改你的事件处理程序,只改变父div中的pargraph,所以,例如你给了#div_1,#div_2和#div_3 ...的3个div的id。 / p>
$("#div_1 p").removAttr('class').addClass('red_text');
答案 3 :(得分:0)
$('p')
是引用每个&lt; p&gt;的简写页面上的标记。
你应该给你想要修改id属性的元素
<p id="iWantThisToChangeColors">
并修改您的代码以引用该ID,如下所示:
$('a.text_blue').click(function() {
$('#iWantThisToChangeColors').removeAttr('class').addClass('blue_text');
});
有一些更有效的方法可以改变一些简单的东西,比如元素中文本的颜色,以及回显颜色变换器链接,但这样做可以帮到你,而不必过多地修改你当前的代码。 / p>