0

我目前有一个 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

4 回答 4

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您需要定位的元素是 parent 的兄弟元素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"));
});
于 2012-06-12T13:55:58.187 回答
1

发生这种情况是因为您正在引用页面中的所有段落。给你想要的段落一个ID，然后选择

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

或者你可以使用类

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

取决于你的需要。

但是您的问题不是很清楚，这可能与您想要的不同，因为我没有看到

代码中的标签，但通常你必须告诉 jQuery 你希望你的代码应用在哪个元素上。简单写p标签时，会影响整个页面。

于 2012-06-12T13:52:10.723 回答
0

在您的 JS 中，您将点击事件绑定到所有段落

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

这是抓取页面上的每个 p 元素（因此，每个 div 中的每个 p ）。

给每个父 div 一个 id，然后更改您的事件处理程序以仅更改父 div 中的段落，因此，例如，您给了 3 个 div id 的 #div_1、#div_2 和 #div_3 ...

$("#div_1 p").removAttr('class').addClass('red_text');
于 2012-06-12T13:54:01.297 回答
0 
$('p')

是引用页面上每个<p> 标记的简写。

您应该像这样为要修改 id 属性的元素提供

<p id="iWantThisToChangeColors">

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

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

有很多更有效的方法可以更改元素中文本的颜色等简单内容，以及回显颜色转换器链接，但这将为您完成，而无需过多修改当前代码。

于 2012-06-12T13:58:49.797 回答