使用onclick颜色转换器来改变段落文本颜色,但仅用于父段落

时间:2012-06-12 13:50:03

标签: jquery html css

我目前有一个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,请告诉我。

提前致谢。

4 个答案:

答案 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>