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およびの 3 つの配列がありますmixed。 neededユーザーがクリックする必要がある ID を保持します。userユーザーがクリックした ID を保持します。mixedユーザーであり、マージが必要です。

クリックするたびに、neededとuserが にマージされmixedます。その結果、mixed一部の ID が 2 回保持されます。次に、これらの重複は除外され、ユーザーがクリックする必要があったがクリックしなかった要素の ID が配列に残されますresult。

問題

最初は、エディターから直接コードを取得しましたが、どういうわけか、フィドルでは機能しません。スクリプトが壊れているところにコメントを追加しました。これはJSfiddleの癖ですか、それとも何かを台無しにしましたか?

の付いた要素をクリックすると.color、ID は に 1 回だけ表示されmixedます。代わりに が 3 回表示されるようになりました。そのため、 で削除する代わりに、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 に答える