Question

我有这张照片，其中每个方格都是img元素。我需要允许用户选择一些组合。唯一允许的组合是：

AD
BC
ABCD

因此，当用户选择A时，我应该停用B和C上的点击事件，但允许D，并根据可能的组合与其他人一样。我知道这个library可能会有所帮助但却没有限制选择的想法。我怎么能做到这一点？

no description

Answer 1

我是一个寻求解决类似问题的插件的创建者，可以在这里找到：

http://rvera.github.io/image-picker

Reyner还提出了一个关于这个问题的github问题，可以在这里找到：

https://github.com/rvera/image-picker/issues/19

如何使用内置回调解决此问题的一个非常简单的示例可以在这里找到：

http://jsfiddle.net/7vyPt/7/

基本思想是使用内置回调来定义你的逻辑，代码如下所示：

jQuery("select.image-picker").imagepicker({
    selected: function(option){
        var values = this.val();
        if (
            jQuery.inArray("dog", values) > -1 && 
            (jQuery.inArray("cat1", values) > -1 || 
             jQuery.inArray("cat2", values) > -1 ) )
        {
            alert("Can't mix cats and dogs!");
            values.splice(jQuery.inArray(option.value(), values), 1);
            this.val(values);
            this.data('picker').sync_picker_with_select();
        }
    }
});

在这个例子中，我们不想混合使用两种类型的选项，猫和狗。它可以很容易地推断出来解决原始问题。

Answer 2

你可以简单地硬连接给定的规则。例如，如果禁用B和C，则单击A时

<img id="a" src="http://placehold.it/100x200"/>
<img id="b" src="http://placehold.it/100x200"/>
<img id="c" src="http://placehold.it/100x200"/>
<img id="d" src="http://placehold.it/100x200"/>

function process_a() {
    $('#b, #c').css('border', '1px solid red');
    $('#b, #c').off('click');
}

$('#a').click(process_a);
$('#b').click(process_b);
$('#c').click(process_c);
$('#d').click(process_d);

查看完整的JSFiddle

Answer 3

为某些组合

在图像元素上设置相同的类名

<img src="path/to/A.jpeg" class="comb1">
<img src="path/to/B.jpeg" class="comb2">
<img src="path/to/C.jpeg" class="comb2">
<img src="path/to/D.jpeg" class="comb1">

组jq元素元素

var comb1 = $('img .comb1'),
    comb2 = $('img .comb2');

绑定或取消绑定

comb1
    .click(function(evt){
        comb2.off('click');
    });


comb2
    .click(function(evt){
        comb1.off('click');
    });

现在问题出现了，你必须再次绑定图像上的click事件你可以在特定时间设定一个时间

setTimeout(function(){
    comb1
        .on('click');
    comb2
        .on('click');
    }, 1000)

仅允许选择一些图像

3 个答案: