0

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

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

同时我希望它是动态的，所以我使用了“.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

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

我不完全清楚您要实现的目标，但我想您需要做的就是使用变量跟踪框的状态，例如，如果您想为每个按钮设置 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;
        }
    }

显然，您会为每个按钮重复此操作……这是一种方法，但如果您能更好地解释您想要做的事情，您可能会得到更好的答案。

于 2012-09-27T18:19:28.623 回答
0

改良版：

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

看在toogleClass外面使用了，你没有使用3次click();事件（这是一种改进）。

这就是我能做的（我认为），因为每个元素都需要用另一个特定的元素替换，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
    }
}​
于 2012-09-27T18:24:14.453 回答