Question

主要想法：

我有16个块（div）和一些按钮（a）。每个按钮表示一组块。最初所有块都是“ON”。如果我按下任何按钮，我会关闭相关的一组块。我用灰色（＃999999）将它们标记为OFF。如果块已经关闭，它应该保持关闭状态。

问题：

当我第一次按下其中一个按钮时，它会起作用。第二次按下按钮 - 不起作用。

Jquery的

$(document).ready(function() {

    /* set of blocks that are "ON" */
    var ONs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

    /* different sets of blocks to turn them OFF  */
    var logi = [1,4,6,7,10,11,13,16];
    var etik = [2,3,5,8,9,12,14,15];
    var sens = [2,4,5,7,9,11,14,16];
    var intu = [1,3,6,8,10,12,13,15];
    var exst = [1,3,5,7,9,11,13,15];
    var intr = [2,4,6,8,10,12,14,16];
    var raci = [3,4,7,8,9,10,13,14];
    var irra = [1,2,5,6,11,12,15,16];               

    $("body").on("click",".mybtn", function() {

        myBlocks = $("div.blocks"); /* get blocks */
        var dih = $(this).attr ("data-arr");
        var tmp = eval (dih);

        for (var i in ONs) {
            for (var j in tmp) {
                if (ONs[i] == tmp [j]) {
                    ONs.splice (i, 1);
                }
            }
        }


        /* turn "OFF" blocks */  
        for (var i = 0; i < ONs.length; i++) { 
            if (i in ONs) {                      
                $("div.blocks").eq(ONs[i]-1).css("backgroundColor", "#999999");
            }
        }
        return false;

    });

});

CSS

.blocks {width: 100px; height: 200px; background-color: #000000; margin: 20px 10px; float:left;}

HTML

<!-- My Buttons. I press them to turn "OFF" some set of blocks -->
<a href="#" data-arr="logi" class="mybtn">logi</a>
<a href="#" data-arr="etik" class="mybtn">etik</a>
<a href="#" data-arr="sens" class="mybtn">sens</a>
<a href="#" data-arr="intu" class="mybtn">intu</a>
<a href="#" data-arr="exst" class="mybtn">exst</a>
<a href="#" data-arr="intr" class="mybtn">intr</a>
<a href="#" data-arr="raci" class="mybtn">raci</a>
<a href="#" data-arr="irra" class="mybtn">irra</a>

<!-- My Blocks. They all are "ON" at the first moment -->
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>

Answer 1

我对你的jQuery代码做了一些小改动。为我工作。

<强> Working Fiddle

我的更改重点：


删除了for in循环。


已移除评估

将数组放入Object中以便于操作。

JQuery的：

$(document).ready(function () {

    /* set of blocks that are "ON" */
    var ONs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

    /* different sets of blocks to turn them OFF  */
    var obj = {
        logi: [1, 4, 6, 7, 10, 11, 13, 16],
        etik: [2, 3, 5, 8, 9, 12, 14, 15],
        sens: [2, 4, 5, 7, 9, 11, 14, 16],
        intu: [1, 3, 6, 8, 10, 12, 13, 15],
        exst: [1, 3, 5, 7, 9, 11, 13, 15],
        intr: [2, 4, 6, 8, 10, 12, 14, 16],
        raci: [3, 4, 7, 8, 9, 10, 13, 14],
        irra: [1, 2, 5, 6, 11, 12, 15, 16]
    }


    $("body").on("click", ".mybtn", function () {

        myBlocks = $("div.blocks"); /* get blocks */
        var tmp = obj[$(this).attr("data-arr")];
        // var tmp = (dih);

        myBlocks.css("backgroundColor", "");
        /* turn "OFF" blocks */
        for (var i = 0; i < tmp.length; i++) {
            myBlocks.eq(tmp[i] - 1).css("backgroundColor", "#999999");
        }
        return false;
    });
});

<强> Working Fiddle

Answer 2

就像@adeneo指出的那样，你继续拼接数组，直到它在第二轮运行时被清空。

一个简单的解决方法是在点击处理程序中移动ONs。

$("body").on("click", ".mybtn", function () {
        var ONs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
[...]

现在您可能会注意到您错过了已禁用块的颜色的实际删除。

不是直接编辑样式，而是可以为禁用的块添加/删除类。

$("body").on("click", ".mybtn", function () {
    var ONs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
    myBlocks = $("div.blocks"); /* get blocks */
    myBlocks.removeClass('dis');
    var dih = $(this).attr("data-arr");
    var tmp = eval(dih);

    for (var i in ONs) {
        for (var j in tmp) {
            if (ONs[i] == tmp[j]) {
                ONs.splice(i, 1);

            }
        }
    }

    /* turn "OFF" blocks */
    for (var i = 0; i < ONs.length; i++) {
        if (i in ONs) {
            $("div.blocks").eq(ONs[i] - 1).addClass("dis");
        }
    }

    return false;

});

http://jsfiddle.net/2cJL6/

.on点击.css第二次不起作用

2 个答案:

JQuery的：