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

I want to access different id's (with same name) using $this in jquery, but its not working. I want when a superhero is clicked only his friend and he himself change their class only.

我想在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>

5 个解决方案

#1

ID attributes must be unique. JavaScript stops searching as soon as it finds the first element with a matching ID. Simply change those IDs into classes instead:

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

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

Then change your jQuery selectors to $('.a') and $('.b') instead:

然后将jQuery选择器更改为$('。a')和$('。b'):

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

#2

You have duplicate ids. IDs should be unique. You can use the markup:

你有重复的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>

And 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");

        });
});

#3

you cant use the same ID for different elements. use ID for only one element.

你不能为不同的元素使用相同的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');
    });
});

Fiddle:

http://jsfiddle.net/me2DE/

#4

Try this:

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

#5

Here is your answer: http://jsfiddle.net/S5rbz/
But it's wrong to have more items with the same id value on the same page. So replace the id's with class values.
Later edit: also, I think you want to remove the existing class, for each children, and add the new class, as if you keep adding the classes, they will be overwritten by the last named class(also keep in mind the cascading rule declarations).

这是你的答案:http://jsfiddle.net/S5rbz/但是在同一页面上有更多具有相同id值的项目是错误的。所以用类值替换id。稍后编辑:另外,我想你想删除每个子节点的现有类,并添加新类,就好像你继续添加类一样,它们将被最后一个命名类覆盖(同时要记住级联规则)声明)。

#1