1

我有这个脚本：

JS

// A & B is needed
var needed = ["#n01", "#n03"];

// always holds what the user has clicked    
var user = [];

// needed + user
var mixed = [];

// takes care of highlighting clicked letters &
// updating the user array

function hilit ( elem, cssClass ) {
    $( elem ).click( function () {
        if( $( this ).hasClass( cssClass )){ 
            //remove from array "highlighted"
           user.splice( $.inArray( "#" + $( this ).attr( "id" ), user ), 1 );  
            $( this ).removeClass( cssClass );
        } else {
            // add to array array "highlighted"
            user.push( "#" + $( this ).attr( "id" ) );
            $( this ).addClass( cssClass );
        }
    });
}

// is something wrong here? it works locally...

$("#lorem").on("click", function() {
       // merging -> needed + user
    mixed = $.merge(needed, user);

    // removing duplicates
    var map = new Object();
        for ( var i = 0; i < mixed.length; i++ ) {
            if (map[mixed[i]] === undefined ){
                map[mixed[i]] = 1;
            }
            else{
                map[mixed[i]]++;
            }
        }

        // result = letters the user didn't click
        var result = new Array();
        for( var i = 0; i < mixed.length; i++ ){   
            if( map[mixed[i]] > 1 ){
                //do nothing
            }
            else{
                result.push(mixed[i]);
            }
        }
)};

hilit (".letter", "color");

测试用例在这里（谢谢你，CD..！）：http: //jsfiddle.net/uDsum/2

HTML

<p id="lorem">

    <span class="letter" id="n01">A</span>
    <span class="letter" id="n02">B</span>
    <span class="letter" id="n03">C</span>

</p>​

CSS

body {
    font-size: 160px;
    font-weight: bold;
}

.letter {
    cursor: pointer;
}

.color {
    background: red;
}

​</p>

描述

段落中的每个字母#lorem都用span .letter. 单击时.letter，将检查该类.color是否存在。如果是，.color则删除并从数组中删除相应的 ID user。否则color添加并将 id 推入user.

有你数组needed：user和mixed。 needed保存用户需要点击的ID。user保存用户单击的 ID。mixed是用户并且需要合并。

每次点击，都会needed合并user到mixed. 结果是mixed持有一些 ID 两次。然后过滤掉这些重复项，在数组中留下用户应该点击但没有点击的元素的 ID result。

问题

好吧，起初：我直接从我的编辑器中获取了代码，但不知何故它无法正常工作。我在脚本中断的地方添加了评论。这是 JSfiddle 的怪癖还是我搞砸了什么？

单击带有 的元素后.color，ID 应该只在 中出现一次mixed。反而是现在出现了三遍。所以不是在 中删除它hilit，而是再次添加它。为什么会这样？我该如何解决这个问题？这与我的使用有关on()吗？

非常需要和感谢任何帮助！

4

1 回答 1

1

这似乎现在工作：http: //jsfiddle.net/uDsum/2/

$("#lorem").on("click", function() {
       // merging -> needed + user
    mixed = $.merge(needed, user);

    // removing duplicates
    var map = new Object();
        for ( var i = 0; i < mixed.length; i++ ) {
            if (map[mixed[i]] === undefined ){
                map[mixed[i]] = 1;
            }
            else{
                map[mixed[i]]++;
            }
        }

        // result = letters the user didn't click
        var result = new Array();
        for( var i = 0; i < mixed.length; i++ ){   
            if( map[mixed[i]] > 1 ){
                //do nothing
            }
            else{
                result.push(mixed[i]);
            }
        }
});

编辑：

看看$.merge()函数的文档：

如果您需要原始的第一个数组，请在调用 $.merge() 之前对其进行复制

http://jsfiddle.net/uDsum/3/

于 2012-07-14T21:03:09.347 回答