jquery操作div同一类

比如说

<div id="red">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="blue">
<div id="sub" class="one"></div>
<div id="sub" class="two"></div>
<div id="sub" class="three"></div>
</div>

当我单击.one时，显示#sub.one，相同的类名。 谢谢你试试这个

<div id="red">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
<div id="blue">
  <div class="sub one"></div>
  <div class="sub two"></div>
  <div class="sub three"></div>
</div>

   $('.one').click(function(){
        $('.sub').hasClass('one').show();
    });

$（'.one'）。单击（函数（）{
$（'.sub'）.hasClass（'one'）.show（）；
});

$（）.ready（函数（））{
$（'.sub'）.hide（）；
$（'#red>div'）。单击（函数（）{
$（'#'+$（this.attr（'class'））.show（）；
});
});

首先，您不应该在页面上复制

id

s，因此我重新构造了您的HTML：

<div id="red">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
<div id="blue" class="sub">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

---

尝试这种方式，减少代码，增加工作量：

jQuery：

$(function(){
  $('#red div').click(function(){//divs inside #red

    var takeClass = (this).attr('class');//takes clicked element's class

    //inside #blue div
    $('#blue .'+takeClass).show();//show's div which got clicked element's class
    // if clicked element's class is 'one', this will show '#blue .one'
  });
});

您的html：

<div id="red">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="blue">
<div id="sub" class="one"></div>
<div id="sub" class="two"></div>
<div id="sub" class="three"></div>
</div>

>什么？不要重复使用id，所有id都应该是唯一的。不要对多个元素使用相同的

id

？并澄清你失败的原因！请不要重复使用ID。我们有这方面的课程。

$(function(){
  $('#red div').click(function(){//divs inside #red

    var takeClass = (this).attr('class');//takes clicked element's class

    //inside #blue div
    $('#blue .'+takeClass).show();//show's div which got clicked element's class
    // if clicked element's class is 'one', this will show '#blue .one'
  });
});

<div id="red">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="blue">
<div id="sub" class="one"></div>
<div id="sub" class="two"></div>
<div id="sub" class="three"></div>
</div>

$(document).ready(function() {
    $("#blue div").hide();
    $("#red div").click(function() {
        var redClass = $(this).attr("class");
        $("#blue ." + redClass).toggle();
    });
});

<div id="red">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
<div id="blue" class="sub">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>​