Question

我正在选择菜单。我希望用户能够选择两个不同的选项，并根据他们选择的内容显示一些内容。现在，我只是使用图像来表示选择。我想知道是否有办法查看用户是否连续选择/点击了两个图像。用户点击两张图片后，我希望将它们重定向到另一页并显示一些内容。

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

Answer 1

使用类标记选择，每次单击后，检查是否选择了两个：

$('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/

Answer 2

如果您不想存储javascript状态，可以尝试在点击时为所选图像添加标记类，并计算找到的数量，然后重定向。

Answer 3

这是我提出的最简单的方法：

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 Fiddle demo

这会将一个点击处理程序应用于所有元素（并阻止事件的传播/冒泡，因此您应该在选择器中比我在此处更具体）;它还将每个clicked-element的tag-name存储在一个数组中，然后将当前单击的元素的tag-name与之前单击的项的tag-name相匹配。

如果两者相同，则if评估返回true并执行doSomething();否则点击处理程序返回false，没有任何反应。

Answer 4

这取决于。如果图像是兄弟节点，则可以检查.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!');
    }
});

如何查看用户是否点击了两个元素？

4 个答案: