访问jQuery中的类的元素不起作用

Question

我想在jquery中使用$ this访问不同的ID（具有相同的名称），但不起作用。 我想当一个超级英雄被点击时，只有他的朋友，而他本人只改变他们的班级。

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.shikhar').click(function(){
            $(this).find('#a').click(function(){
                $(this).find('#b').addClass("selected");
                $(this).find('#a').addClass("highlight");
            });
            $(this).find('#b').click(function(){
                $(this).find('#a').addClass("selected");
                $(this).find('#b').addClass("highlight");
            });
        });
    });
</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<div class="shikhar">
    <div id="a">Spiderman</div>
    <div id="b">Hulk</div>
</div>
<div class="shikhar">
    <div id="a">Superman</div>
    <div id="b">Batman</div>
</div>
</body>
</html>

Answer 1

ID属性必须是唯一的。 一旦找到具有匹配ID的第一个元素，JavaScript就会停止搜索。 只需将这些ID更改为类即可：

<div class="a">Spiderman</div>
...
<div class="a">Superman</div>

然后将jQuery选择器改为$('.a')和$('.b') ：

$(this).find('.a').click(function(){
    $(this).find('.b').addClass("selected");
    $(this).find('.a').addClass("highlight");
});

Answer 2

您有重复的ID。 ID应该是唯一的。 您可以使用标记：

 <div class="shikhar">
  <div class="a">Spiderman</div>
  <div class="b">Hulk</div>
 </div>
 <div class="shikhar">
  <div class="a">Superman</div>
  <div class="b">Batman</div>
</div>

和JS：

$('.shikhar').click(function(){
        $(this).find('.a').click(function(){
            $(this).next().addClass("selected");
            $(this).addClass("highlight");

        });
        $(this).find('.b').click(function(){
            $(this).prev().addClass("selected");
            $(this).addClass("highlight");

        });
});

Answer 3

您不能对不同的元素使用相同的ID。 仅对一个元素使用ID。

HTML：

<div class="shikhar">

    <div class="a">Spiderman</div>
    <div class="b">Hulk</div>

</div>


<div class="shikhar">

    <div class="a">Superman</div>
    <div class="b">Batman</div>

</div>

jQuery的：

$('.shikhar').each(function(){
    $(this).on('click','.a, .b',function(){
        $(this).closest('.shikhar').children().removeClass('selected highlight');
        $(this).addClass('selected');
        $(this).siblings().addClass('highlight');
    });
});

小提琴：

http://jsfiddle.net/me2DE/

Answer 4

尝试这个：

$(document).ready(function() {
   $('.shikhar >').click(function(){
        $(this).addClass("highlight");
        $(this).siblings('div').addClass("selected");
   });
});

Answer 5

这是您的答案： http : //jsfiddle.net/S5rbz/
但是在同一页面上有更多具有相同id值的项目是错误的。 因此，将ID替换为class值。
以后的编辑：另外，我想您要为每个子级删除现有的类，并添加新的类，就好像您继续添加这些类一样，它们将被最后一个命名的类覆盖（也请记住级联规则）声明）。

访问jQuery中的类的元素不起作用

问题描述

5 个解决方案

解决方案1
1 2014-05-23 14:12:49

解决方案2
0 2014-05-23 14:14:52

解决方案3
0 2014-05-23 14:20:17

解决方案4
0 2014-05-23 14:45:55

解决方案5
0 2014-05-23 14:52:24

访问jQuery中的类的元素不起作用

问题描述

5 个解决方案

解决方案1 1 2014-05-23 14:12:49

解决方案2 0 2014-05-23 14:14:52

解决方案3 0 2014-05-23 14:20:17

解决方案4 0 2014-05-23 14:45:55

解决方案5 0 2014-05-23 14:52:24

解决方案1
1 2014-05-23 14:12:49

解决方案2
0 2014-05-23 14:14:52

解决方案3
0 2014-05-23 14:20:17

解决方案4
0 2014-05-23 14:45:55

解决方案5
0 2014-05-23 14:52:24