Question

以下是代码：http://jsfiddle.net/celiostat/NCPv9/

2 Jquery插件可以更改（和设置）： - div的背景颜色为灰色 - 文字颜色为红色。

问题是我必须准确地将鼠标指向文本，以便文本也改变颜色。我想通过点击 - 在div中的任意位置

来更改背景Div颜色和文本

尝试了其他帖子的各种组合......但没有任何效果。

（理想情况下我也想同时改变图片！）

$(".item_unselected").on("click", function() {
$(this).toggleClass("gray_cliked_box");
$(".item_unselected").not(this).removeClass("gray_cliked_box");
});

$(".item_text_in_menubar").on("click", function() {
$(this).toggleClass("blue_cliked_text");
$(".item_text_in_menubar").not(this).removeClass("blue_cliked_text");

});

Answer 1

你相当接近，但是你必须点击文本的原因是因为你只是在点击文本时设置文本的类 - 你从来没有在点击div时设置它。值得庆幸的是，您可以通过只有一个事件来优化（并修复）您的代码。如果单击div，则只需设置两个项目。

您可以使用jQuery中的find方法执行此操作，以查找单击div时要修改的范围。更新的JS如下：

$(".item_unselected").on("click", function () {
    $(".item_unselected").removeClass("gray_cliked_box");
    $(".item_text_in_menubar").removeClass("blue_cliked_text");
    var $this = $(this);
    $this.addClass("gray_cliked_box");
    $this.find(".item_text_in_menubar").addClass("blue_cliked_text"); 
});

更新小提琴：http://jsfiddle.net/NCPv9/3/

这实际上做的是从所有对象中删除类，然后只需将类添加回所需的类。您也不必使用toggleClass。你知道你正在添加它，所以只需使用addClass。

Answer 2

这是一个CSS问题，而不是jquery问题。我将您的最后一个CSS选择器更新为：

.gray_cliked_box .item_text_in_menubar {  /*for jquery*/
    color: red;
}

，单击时文本变为红色。

添加的选择器表示.gray_clicked_box的班级.item_text_in_menubar的孩子应为red。这取代了.item_text_in_menubar的其他定义，因为它是一个更具体的选择器。

http://jsfiddle.net/NCPv9/4/

JQuery一次切换两个类

2 个答案: