0

選択メニューに取り組んでいます。ユーザーが2つの異なるオプションを選択し、選択した内容に応じて何かを表示できるようにしたいと思います。現在、私は選択を表すために画像を使用しています。ユーザーが2つの画像を連続して選択/クリックしたかどうかを確認する方法があるかどうか疑問に思っています。ユーザーが2つの画像をクリックした後、それらを別のページにリダイレクトして、何かを表示させたいと思います。

/*clicked on certain two images*/(function(){
    document.location.href="#page";
    $('option').css('display', 'inline');
});
4

4 に答える 4

2

クラスを使用して選択をマークし、クリックするたびに、2つが選択されているかどうかを確認します。

$('img').click( function() {
   $(this).toggleClass('selected');

    if($('img.selected').length == 2) {
        alert("Two images selected!");
        // Or redirect to new page, etc.
    }
});

デモ：

http://jsfiddle.net/G9NXA/

もちろん、これは一般的なソリューションです。セレクターとしては使用したくないかもしれませんimgが、選択可能な画像を定義する他のクラスを使用することをお勧めします。

クリック/選択が連続クリックであることを確認したい場合、ユーザーが他の場所をクリックした場合は、選択をクリアするだけです。

デモ： http： //jsfiddle.net/G9NXA/1/

また、時間的に連続するのではなく、空間的に連続することを意味する場合は、別の例を次に示します。

デモ： http： //jsfiddle.net/G9NXA/2/

于 2012-07-25T17:49:45.330 に答える
0

javascriptの状態を保存したくない場合は、クリック時に選択した画像にマーカークラスを追加し、見つかった画像の数を数えてリダイレクトしてみてください。

于 2012-07-25T17:46:28.457 に答える
0

これは私が思いついた最も簡単な方法です：

var tracker = [];

$('*').click(
    function(e){
        e.stopPropagation();
        var lastEl = tracker.length ? tracker.pop() : '',
            tag = this.tagName.toLowerCase();
        tracker.push(tag);
        if (tag == lastEl) {
            doSomething();
        }
        else {
            return false;
        }
    });​

JSフィドルデモ。

ただし、これによりすべての要素にクリックハンドラーが適用されます（イベントの伝播/バブリングが防止されるため、セレクターでは、ここにあるよりも具体的にする必要があります）。また、クリックされた各要素のタグ名を配列に格納し、現在クリックされている要素のタグ名を以前にクリックされたアイテムのタグ名と照合します。

2つが同じである場合、if評価が返さtrueれ、doSomething()が実行されます。それ以外の場合、クリックハンドラはを返しfalse、何も起こりません。

于 2012-07-25T17:49:42.633 に答える
0

これは状況によって異なります。イメージが兄弟ノードである場合は、.prev（）と.next（）を確認できます。'imageClicked'のようなクラスでクリックすると画像が表示されます。次に、.prev（）または.next（）にもそのクラスがあるかどうかを確認します。

$('img').click( function() {
    var clickedImg = $(this);

    clickedImg.toggleClass('imageClicked');

    if(clickedImg.hasClass('imageClicked')) {
        if(clickedImg.prev().hasClass('imageClicked') ||
        clickedImg.next().hasClass('imageClicked'))
            alert('Siblings Selected!');
    }
});
于 2012-07-25T17:50:11.963 に答える