Question

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

提前致谢。

Answer 1

根据您的澄清评论，您可以使用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"));
});

Answer 2

这种情况正在发生，因为您正在查看页面中的所有段落。给你想要id的段落，然后选择

   $('#yourparagraph').removeAttr('class').addClass('red_text');

或者你可以使用课程

     $('.yourclass').removeAttr('class').addClass('red_text');

取决于您的需求。

然而你的问题不是很清楚，这可能与你想要的不同，因为我在你的代码中看不到

标签，但一般来说你必须告诉jQuery你想要你的代码到哪个元素应用于。当简单的写p标签时，它会影响整个页面。

Answer 3

在您的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');

Answer 4

$('p')

是引用每个＆lt; p＆gt;的简写页面上的标记。

你应该给你想要修改id属性的元素

<p id="iWantThisToChangeColors">

并修改您的代码以引用该ID，如下所示：

$('a.text_blue').click(function() {
     $('#iWantThisToChangeColors').removeAttr('class').addClass('blue_text');   
});

有一些更有效的方法可以改变一些简单的东西，比如元素中文本的颜色，以及回显颜色变换器链接，但这样做可以帮到你，而不必过多地修改你当前的代码。 / p>

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

4 个答案: