-1

编辑：

感谢Brad Christie提供代码

我切换到使用复选框。

页面上有 8 个复选框，我希望最多允许 4 个可互换的选择。

选中复选框时，我希望在 div 元素下方显示图像，并在图像底部滑入虚线。

$(文档).ready(函数 () {

var $ids = $('#weird,#crazy,#cool,#foul,#great,#amazing,#good,#decent'), $boxes = $('#box1,#box2,#box3,#box4 ');

function addSelection(id) {

    var $empty = $boxes.filter('[src=""]');

    if ($empty.size() > 0) {

        // empty spot available, fill it with the ID
        $empty.first().attr('src', id+'.png');

        return true;
    }
    return false;
}


function removeSelection(id) {

    var $match = $boxes.filter('[src$="'+id+'"]');

    if ($match.size() > 0) {

        // found a match for this ID, so remove it.
        $match.attr('src', '');

        return true;
    }

    // didn't find a match for this id
    return false;
}


$ids.on('click', function(e){

    var $this = $(this);

    if (removeSelection(this.id)) {

        $this.removeClass('selected');

    } else if (addSelection(this.id)) {

        $this.addClass('selected');
    }

    e.preventDefault();
});

});

标记：

    <form>
        <div id="weird"><div class="v"><input type="checkbox" name="what_did" value="smart_thrift">Smart Thrift</div></div>
        <div id="crazy"><div class="v"><input type="checkbox" name="what_did" value="foodie">Foodie</div></div>
        <div id="cool"><div class="v"><input type="checkbox" name="what_did" value="outdoors">Outdoors</div></div>
        <div id="foul"><div class="v"><input type="checkbox" name="what_did" value="fashion">Fashion</div></div>
        <div id="great"><div class="v"><input type="checkbox" name="what_did" value="culture">Culture</div></div>
        <div id="amazing"><div class="v"><input type="checkbox" name="what_did" value="fitness">Fitness</div></div>
        <div id="good"><div class="v"><input type="checkbox" name="what_did" value="kids_friendly">Kids Friendly</div></div>
        <div id="decent"><div class="v"><input type="checkbox" name="what_did" value="home_improv">Home Improvement</div></div>
    </form>


    <div>
        <img id="box1" src="" />
        <img id="box2" src="" />
        <img id="box3" src="" />
        <img id="box4" src="" />
    </div>


    <div id="line1"></div>
    <div id="line2"></div>
    <div id="line3"></div>
    <div id="line4"></div>
    <div id="line5"></div>
4

2 回答 2

1 
$(function() {

    var maxSelected = 4,
        selected    = 0,
        totalDivs   = 8;

    for(var i = 0; i < totalDivs; ++i) {
        $('#0' + i).on('click', function(){
            if(selected < maxSelected) {
                $('#box' + i).attr('src','0' + i + '.png');
                ++selected;
            }
        });
    }
});

图像“关闭”是什么意思？

请注意，如果您有超过 9 个 div（2 位以上的数字，则此代码中几乎不需要更改）。

于 2013-07-23T14:44:21.220 回答
1

不确定真正要问的是什么，但我可以向您展示如何使用 css 类限制所选项目的数量（在此示例中我使用过selected）：

// simple way to build the list of IDs
// idSel, when all said and done, will be '#01,#02,#03,#04,...' etc.
var ids = [];
for (var i = 1; i < 9; i++){
    ids.push('#0' + i);
}
var idSel = ids.join(',');

// meat'n'potatos
$(idSel).on('click',function(e){
    var $this = $(this);
    // always allow a selected item to be unselected
    if ($this.is('.selected')){
        $this.removeClass('selected');
    }
    // only allow a new selection if there are fewer than 4 other items selected
    else if ($(idSel).filter('.selected').size() < 4){
        $this.addClass('selected');
        // using placehold.it for the demo, but you can change this back to
        // this.id+'.png'
        $('#box1').attr('src','http://placehold.it/150&text='+this.id);
    }
    // prevent the click from activating the link
    e.preventDefault();
});

在此处找到示例：http: //jsfiddle.net/qH7TF/

编辑第二个版本，它添加和删除图像#container（我假设隐含意图）：http: //jsfiddle.net/qH7TF/1/

于 2013-07-23T14:49:20.203 回答