Question

我有这段代码：

<select multiple="multiple" class="image-picker show-html">
    <option data-img-src="http://placehold.it/125x200" value="1">SportField 1</option>
    <option data-img-src="http://placehold.it/125x200" value="2">SportField 2</option>
    <option data-img-src="http://placehold.it/125x200" value="3">SportField 3</option>
    <option data-img-src="http://placehold.it/125x200" value="4">SportField 4</option>
</select>

然后使用Image Picker Plugin我写了这段代码：

<script>
    $(function() {
        $("select").imagepicker({
            show_label: true,
            changed: function() {
            },
            clicked: function() {
            },
            selected: function() {
                console.log(this.attr('value'));
            }
        })
    });
</script>

我需要的是社区需要一些选择。现在唯一允许的选择是：

SportField1-SportField2
SportField3-SportField4
SportField1-SportField2-SportField3-SportField4

这意味着什么？当我选择SportField1时，我可以选择SportField2表示相邻图像，但如果您能看到最新的允许选择，则为SportField。我怎么能做到这一点？

修改

基于@Ruud的建议我做了以下更改，HTML代码就是这个：

<select name="choice" id="choice">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">AB</option>
    <option value="6">CD</option>
    <option value="7">ABCD</option>
</select>

<img src="http://placehold.it/125x200" data-id="A">
<img src="http://placehold.it/125x200" data-id="B">
<img src="http://placehold.it/125x200" data-id="C">
<img src="http://placehold.it/125x200" data-id="D">

<script>
    $(function() {
        $('choice').change(function() {

        });
    });
</script>

现在解释一下：

如果我在选择中选择A，那么data-id=1的图像应该得到一条线（这可以通过CSS完成）
如果我在选择中选择选择B，那么data-id=2的图像应该得到一条线（这可以通过CSS完成）
如果我在选择中选择C，那么data-id=3的图像应该得到一条线（这可以通过CSS完成）
如果我在选择中选择D，则data-id=4的图像应该得到一条线（这可以通过CSS完成）
如果我选择选择AB然后选择带有data-id=1的图像，带有data-id=2的图像应该获得一条线（这可以通过CSS完成）
如果我选择选择CD然后选择带有data-id=3的图像，带有data-id=3的图像应该获得一条线（这可以通过CSS完成）
如果我选择选择ABCD，那么所有图像都应该得到一条线（这可以通过CSS完成）

如何在SELECT更改时实现此目标？

Answer 1

以下函数检查特定图像是否属于当前选择。它确实要求您在选项的值中使用图片ID（例如ABCD）;对于我来说，这似乎比“神奇的数字”1-7更合乎逻辑。

function isSelected(selector, image) {
    return selector.find(':selected').text().indexOf(image.data('id')) >= 0;
};

我不清楚你的意思是“图像应该得到一条线”，所以我做了一个简单的演示，将CSS类应用于所选图像。请注意我在$('#choice')添加了哈希值; choice是id，而不是标签名称。

$(function() {
    $('#choice').change(function() {
        var choice = $(this);   // = $('#choice');
        var allImages = $('img');
        var selectedImages = allImages.filter(function() { return isSelected(choice, $(this)); });

        allImages.removeClass('myprecious');
        selectedImages.addClass('myprecious');
    });
});

FYC，这是一个演示：http://jsfiddle.net/UrKBZ/

基于所做选择的环绕图像

1 个答案: