0

例えば

<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 show #sub .oneをクリックすると、同じクラス名になります。ありがとう

4

5 に答える 5

0

これを試して

<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();
    });
于 2012-07-19T14:34:56.347 に答える
0
<div id="red">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
<div id="blue">
  <div id="one" class="sub"></div>
  <div id="two" class="sub"></div>
  <div id="three" class="sub"></div>
</div>

$().ready(function(){
  $('.sub').hide();
  $('#red>div').click(function(){
    $('#' + $(this).attr('class')).show();
  });
});
于 2012-07-19T14:37:59.320 に答える
0

まず、ページ上でsを複製するべきではないidので、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>

次に、次のようなことを行うことができます。

$('#red').on('click', 'div', function(ev){
    $('.sub div').hide();
    $('.sub .' + $(this).attr('class')).show();
});
于 2012-07-19T14:38:20.927 に答える
0

この方法を試して、コードを減らし、作業を増やしてください。

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>
于 2012-07-19T14:41:56.657 に答える
0

>> JSFIDDLE <<

次のように、showの代わりにtoggleを使用することをお勧めします。

jQuery

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

HTML構造:

<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>​
于 2012-07-19T14:55:03.453 に答える