Question

我希望在点击其中一个共享此属性相同值的div之后，更改属性（例如#id）具有相同值的所有div的背景颜色。

我试过了：

$('.group').click(function(){

  var clickedID=$(this).attr("id");
    $('.group').(function(){
        if($(this).attr("id")==clickedID){
          $(this).css({"background-color",'red'});

          });
      ;

  });

Answer 1

页面中不能有多个具有相同名称的ID。你必须使用类。

if( $(this).hasClass('classname') ) { ... }

文档语言可能包含声明为的属性类型ID。什么使ID类型的属性特别是没有两个这样的属性可以具有相同的值;无论文档语言如何， ID属性可用于唯一标识其元素。在HTML中 ID属性命名为“id”; XML应用程序可以命名ID属性不同，但同样的限制适用。

参考：w3.org

Answer 2

好的，每个人都有点卡在重复的ID上，这完全有效，但不是问题的关键点 - 你只是有点不幸选择一个你不能重复的属性。

代码的基本结构很好：

将点击事件附加到所有.group s
点击后，获取被点击元素的属性值。
查找具有相同属性值的内容并更改CSS

存储值

所以第一个问题是，如果id无法使用两次，我可以用什么属性将事物链接在一起？ HTML5（虽然旧版浏览器通常也会工作）引入了一种正式的方法 - data- attribute。来自MDN链接：

HTML5在设计时考虑了可扩展性，因为数据应与特定元素相关联，但不必具有任何已定义的含义。 data- *属性允许我们在标准的语义HTML元素上存储额外的信息

换句话说，您可以存储特定于您的网页的元数据，该元数据不用于普通的“HTML”。在这种情况下，我们可以将其称为明显的data-value：

<div data-value="x" class="group">1</div>
<div data-value="y" class="group">2</div>
<div data-value="x" class="group">3</div>

这里有1和3个链接。

获取价值和相关元素

JQuery提供了一个帮助方法来访问这些值 - .data()。我们可以像

var clickedValue = $ this.data（“value”）;

然后，要获取相关元素，您需要使用attribute equals selector搜索文档并匹配具有相同属性值的.group元素：

$('.group[data-value="' + clickedValue + '"]')

设置CSS

现在我们找到了我们想要的东西，我们可以使用.css()来改变背景颜色。如果要设置1个css属性，则需要两个字符串;如果要设置多个，则需要一个对象。我们只想设置background-color，所以第一种方式就足够了：

someJQueryObject.css('background-color', 'red');

将它们放在一起

现在我们已经完成了我们需要将它们组合在一起的步骤。我还添加了一行来存储$(this)的jQuery对象，以解释如何使用它。我们并不真的需要这种情况，因为我们只使用它一次，但它应该证明这个想法。

$('.group').click(function () {
    // this "caches" the jquery object. If you are using it multiple times,
    // this is much more efficient as it doesn't have to rebuild things every time.
    var $this = $(this);
    
    // get the "data-value" of the clicked element
    var clickedValue = $this.data("value");
    
    // now find other groups with the same data-value
    // and apply the css to it
    $('.group[data-value="' + clickedValue + '"]').css('background-color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div data-value="x" class="group">1</div>
<div data-value="y" class="group">2</div>
<div data-value="x" class="group">3</div>

Answer 3

好吧......这是一个微弱的尝试来剖析你想要做的事情。

<强>功能

你对.(function的使用是......男人，甚至不是。首先，看起来您想针对某个特定ID验证所点击的项目？您需要将其声明为函数外的变量：

var validID = 'foo';

然后，您可以安全地将验证拆分为单独的函数：

function checkID(id,$el){
    if(id === validID){
        $el.css({
            backgroundColor:'red'
        });
    }
}

<强>的jQuery

然后，访问.click()函数中的函数：

$('.group').on('click',function(){
    var self = this;

    checkID(self.id,$(self));
});

<强>结果

您的整体JS将如下所示：

var validID = 'foo';

function checkID(id,$el){
    if(id === validID){
        $el.css({
            backgroundColor:'red'
        });
    }
}

$('.group').on('click',function(){
    var self = this;

    checkID(self.id,$(self));
});

一些提示：

尽可能使用===代替== ... ==仅检查值，而===同时检查值和类型，因此"2" == 2为真，而"2" === 2是假的
了解如何利用元素级项目。有很多地方可以做到这一点，但执行$(this).attr('id')比使用this.id具有相同结果的速度慢大约600,000倍。你无处不在，但this.id和this.checked之类的东西非常简单，跨浏览器，速度更快
当我提到“缓存你的$(this)实例”时，我试图在这里提供一个基本的例子（尽管它并不真正适用）。一般规则是，如果您需要多次引用相同的元素/对象，则需要对其进行缓存，因为您会看到速度和资源消耗的大幅提升。我在this函数中做了一个缓存.on('click')的示例，但您可以使用任何内容进行缓存。
个人推荐，学会使用.on()而不是速记。如果您只需要绑定一个事件，那么.click()效果很好，但如果绑定.mouseenter()和.mouseleave()怎么办？

你可以这样做：

$('.someSelector').click(function(){
    // stuff
}).mouseenter(function(){
    // stuff
}).mouseleave(function(){
    // stuff
});

到此：

$('.someSelector').on({
    click:function(){
         // stuff
    },
    mouseenter:function(){
        // stuff
    },
    mouseleave:function(){
        // stuff
    }
});

更容易维护，但也更快（因为你只打了一次而不是三次）。

希望这有帮助！

单击时更改一组div的颜色

3 个答案: