Question

我有多个＆＃34;链接＆＃34; （按钮）根据点击的链接加载图片。我想将当前链接的文本颜色从灰色更改为黑色，但是当按下不同的链接时，我希望颜色恢复为灰色，但我不知道如何做到这一点，因为现在我最终使所有链接从灰色变为黑色？

以下是2个链接（20个中的一个）的示例。

<script>
    $(document).ready(function() {
        $(".NYC_link").click(function() {
            $(".NYC_link a").css('color', 'black');
        });
        $( ".LA_link" ).click(function() {
            $(".LA_link a").css('color', 'black');
        });
    });
</script>

HTML code：

<div class="gallerynames">
    <div class="NYC_link">
        <a>NYC Apartment</a>
    </div>
    <div class="LA_link">
        <a>LA Home</a>
    </div>
</div>

Answer 1

您需要在选择器jQuery( selector [, context ] )的上下文中传递this以访问当前a中的NYC_link，或者您可以使用{{ 1}}

$(this).find("a")

Answer 2

对于每个链接，您不需要单独的类来与它们一起操作。为所有这些创建单个类：

<a href="#" class="cityLink NYC_link">NYC</a>
<a href="#" class="cityLink LA_link">LA</a>

<a href="#" class="cityLink LV_link">20 more cities go here...</a>

然后，您可以使用以下脚本：

<script>
    $(document).ready(function() {
        $(".cityLink").click(function() {
            $(".cityLink").css('color', 'gray');
            $(this).css('color', 'black');
        });
    });
</script>

您可以使用this获取点击的项目以更改CSS颜色。

因此，如果有人点击了该链接 - 您可以将此类的所有其他链接颜色设置为灰色 - 然后，您可以将点击的链接颜色设置为黑色。这样，您只有最后点击的链接为黑色。

无论如何，以这种方式改变颜色是非常糟糕的方法。

你可能想创建一个类＆＃34; active＆＃34;并用这种方式描述：

.cityLink {
    color: gray;
}

.cityLink.active {
    color: black;
}

然后，你可以用这个脚本做同样的事情：

<script>
    $(document).ready(function() {
        $(".cityLink").click(function() {
            $(".cityLink").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

检查this JSFiddle demo。

更改文本jquery的颜色（一次只有一个div）

2 个答案: