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属性必须是唯一的。 JavaScript一找到具有匹配ID的 first 元素，就会停止搜索。只需将这些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值的项目是错误的。所以用class值替换id。
稍后编辑：另外，我想你想为每个孩子删除现有的类，并添加新的类，就像你继续添加一样这些类，它们将被最后命名的类覆盖（同时记住级联规则声明）。

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

5 个答案: