0

Jquery の探索を開始したばかりですが、実際には最初の設計の 1 つを実現しようとしています。

問題は、(この単純な例では) 3 つの div ボックスで、div の 1 つをクリックして個別に異なるクラスを変更したいということです。これは 1 回だけ可能であるようです!

同時に動的にしたいので、「.switchClass」（「.toggleClass」と「.removeClass().addClass()」の後）とjquery UIを使用して、目に見える変換を行いました。

クラスを複数回切り替える方法を説明できれば、とても満足です。

私の地下コーディングを許してください...私は初心者です。

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="testgetid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<title>keepitclear</title>
</head>

<body>
<div id="wrapper">
    <div id="green" class="Aindex">A</div>
    <div id="red" class="Bindex">B</div>
    <div id="blue" class="Cindex">C</div>

</div>

<script>
      $('#green').click(function () {
      $(this).toggleClass('Aaaaaa');
      $('#red').toggleClass('Baaaaa');
      $('#blue').toggleClass('Caaaaa');
  });
      $('#red').click(function () {
      $(this).toggleClass('Bbbbbb');
      $('#green').toggleClass('Abbbbb');
      $('#blue').toggleClass('Cbbbbb');
  });

      $('#blue').click(function () {
      $(this).toggleClass('Cccccc');
      $('#green').toggleClass('Accccc');
      $('#red').toggleClass('Bccccc');
  });


 </script>


</body>
</html>

CSS (素敵なので必須):

body{
    background-color: black;
}

#wrapper{
    margin: 0 auto;
    width: 1280px;
    height: 1024px;
    overflow: hidden;
    background-color: white;
}

.Aindex{
    position: absolute;
    margin-top:  100px;
    margin-left: 300px;
    width: 100px;
    height: 100px;
    background-color: #53D35F;
    cursor: pointer;
}

.Aaaaaa{
    position: absolute;
    margin-top:  0px;
    margin-left: 250px;
    width: 200px;
    height: 200px;
    background-color: #99F748;
}

.Abbbbb{
    position: absolute;
    margin-top:  125px;
    margin-left: 350px;
    width: 50px;
    height: 50px;
    background-color: #287F28;
}

.Accccc{
    position: absolute;
    margin-top:  125px;
    margin-left: 275px;
    width: 50px;
    height: 50px;
    background-color: #287F28;
}


.Bindex{
    position: absolute;
    margin-top:  200px;
    margin-left: 250px;
    width: 100px;
    height: 100px;
    background-color: #F48725;
}   

.Baaaaa{
    position: absolute;
    margin-top:  175px;
    margin-left: 225px;
    width: 50px;
    height: 50px;
    background-color: #9E2B15;
}


.Bbbbbb{
    position: absolute;
    margin-top:  150px;
    margin-left: 200px;
    width: 200px;
    height: 200px;
    background-color: #F4dC76;
}
.Bccccc{
    position: absolute;
    margin-top:  150px;
    margin-left: 250px;
    width: 50px;
    height: 50px;
    background-color: #9E2B15;
}

.Cindex{
    position: absolute;
    margin-top:  200px;
    margin-left: 350px;
    width: 100px;
    height: 100px;
    background-color: #1FA2FF;
}   




.Caaaaa{
    position: absolute;
    margin-top:  175px;
    margin-left: 425px;
    width: 50px;
    height: 50px;
    background-color: #4F35D3;
}


.Cbbbbb{
    position: absolute;
    margin-top:  175px;
    margin-left: 375px;
    width: 50px;
    height: 50px;
    background-color: #4F35D3;
}

.Cccccc{
    position: absolute;
    margin-top:  150px;
    margin-left: 275px;
    width: 200px;
    height: 200px;
    background-color: #1FFFFA;
}
4

3 に答える 3

0

あなたが何を達成しようとしているのか完全にはわかりませんが、あなたがする必要があるのは変数を使用してボックスの状態を追跡することだけだと思います。たとえば、ボタンごとに2つの異なるトグルタイプが必要な場合：

var green_state=1, red_state=1, blue_state=1;

    $('#green').click(function () {
        //maybe you want to reset blue and red state here
        switch(green_state){
            case 1:
                green_state=2;
                //toggle code for first state
                break;
            case 2:
                green_state=1;
                //toggle code for second state
                break;
        }
    }

明らかに、ボタンごとにこれを繰り返します...これは1つのアプローチですが、あなたがやろうとしていることをもう少しうまく説明できれば、より良い答えが得られるかもしれません。

于 2012-09-27T18:19:28.623 に答える
0

最も美しい答えではありませんが、代わりに switchClass を使用する場合は、現在のクラスを確認し、それに応じて切り替えることができます

var $red = $('#red');
var $blue = $('#blue');
var $green = $('#green');
$('#green').click(function() {
    var $this = $(this);        
    if ($this.hasClass('Aaaaaa')) {
        $this.switchClass('Aaaaaa', '', 1000);
        $red.switchClass('Baaaaa', '', 1000);
        $blue.switchClass('Caaaaa', '', 1000);
    } else {
        $this.switchClass('', 'Aaaaaa', 1000);
        $red.switchClass('', 'Baaaaa', 1000);
        $blue.switchClass('', 'Caaaaa', 1000);
    }
});
$red.click(function() {
    var $this = $(this);
    if ($this.hasClass('Bbbbbb')) {
       $this.switchClass('Bbbbbb', '', 1000);
       $green.switchClass('Abbbbb', '', 1000);
       $blue.switchClass('Cbbbbb', '', 1000);
    }else{
       $this.switchClass('', 'Bbbbbb', 1000);
       $green.switchClass('','Abbbbb',1000);
       $blue.switchClass('','Cbbbbb',1000);
    }    
});

$('#blue').click(function() {
    var $this = $(this);
    if ($this.hasClass('Cccccc')) {
        $this.switchClass('Cccccc', '', 1000);
        $green.switchClass('Accccc', '', 1000);
        $red.switchClass('Bccccc', '', 1000);
    }else{
        $this.switchClass('', 'Cccccc', 1000);
        $green.switchClass('','Accccc',1000);
        $red.switchClass('','Bccccc',1000);
    }   
});

http://jsfiddle.net/fT3we/

于 2012-09-27T18:34:53.373 に答える
0

改良版:

ライブデモ: http://jsfiddle.net/oscarj24/pmbjk/2/

toogleClassが外部で使用されており、click();イベントを3回使用していないことを確認してください(これは一種の改善です)。

各要素を別の特定の要素に置き換える必要があり、それらをすべてグループ化したり、 「グローバル」や「定数」などの他の何かを実行したりすることはできないため、私ができることはこれだけです。class toogleClassclass

HTML:

<div id="wrapper">
    <div data-color="green" class="Aindex">A</div>
    <div data-color="red" class="Bindex">B</div>
    <div data-color="blue" class="Cindex">C</div>
</div>

jQuery:

$(document).ready(function() {

    /* get all squares inside 'wrapper' div */
    var squares = $('#wrapper').find('div');

    squares.click(function(e) {
        /* detect which element was clicked */
        var square = $(e.target);
        /* get the color of the square element */
        var color = square.data('color');
        /* pass parameters to the method that will toogle class */
        toogleClassElems(color, square);
    });

});

function toogleClassElems(color, square) {
    if (color === 'green') {
        square.toggleClass('Aaaaaa'); //actual square
        square.next().toggleClass('Baaaaa'); //red square
        square.next().next().toggleClass('Caaaaa'); //blue square
    } else if (color === 'red') {
        square.toggleClass('Bbbbbb'); //actual square
        square.prev().toggleClass('Abbbbb'); //green square
        square.next().toggleClass('Cbbbbb'); //blue square 
    } else if (color === 'blue') {
        square.toggleClass('Cccccc'); //actual square
        square.prev().prev().toggleClass('Accccc'); //green square
        square.prev().toggleClass('Bccccc'); //red square
    }
}​
于 2012-09-27T18:24:14.453 に答える