Question

我刚开始探索Jquery，实际上我正在努力实现我的第一个设计之一。

问题是，我希望（在这个简单的例子中）三个div框通过点击其中一个div来改变他们的类别，这似乎只有一次可能！

同时我希望它是动态的，所以我使用“.switchClass”（在“.toggleClass”和“.removeClass（）。addClass（）之后）和jquery UI进行可见的转换。

如果s.o.会很棒并且令人满意可以向我解释一下，我怎么能多次换班。

请原谅我的地下编码...我是新手。

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;
}

Answer 1

我并不完全清楚你想要实现的目标，但我想你需要做的就是使用变量来跟踪盒子的状态，例如，如果你想要有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;
        }
    }

显然你会为每个按钮重复这个...这是一种方法，但如果你能解释一下你想要做得更好一些，你可能会得到更好的答案。

Answer 2

改进版本：

现场演示： http://jsfiddle.net/oscarj24/pmbjk/2/

看看toogleClass在外面使用，而您没有使用click();事件 3 次（这是一种改进）。< / p>

这就是我能做的所有（我认为），因为每个元素都需要被另一个特定的class替换，我不能将它们全部分组或者像“全局”或“常数” toogleClass因为他们之间不共享任何class。

的 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 } }

Answer 3

不是最漂亮的答案，但是如果你想使用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/

试图创建不断的类更改

3 个答案:

改进版本：