0

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

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

4 回答 4

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 小提琴演示。

但是，这会将单击处理程序应用于所有元素（并防止事件的传播/冒泡，因此您应该在选择器中比我在这里更具体）；它还将每个单击元素的标记名称存储在一个数组中，然后将当前单击元素的标记名称与先前单击的项目的标记名称进行匹配。

如果两者相同，则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 回答