Question

这是我在使用jQuery 1.8.3的Wordpress最新版本中使用的代码

我想将选项限制为3.任何想法？

        <script type="text/javascript">
    jQuery(function($){
       $('ul.image_picker_selector li').click(function() {
        $(this).toggleClass('selected');

        if ($('.selected').length > 3) {
            $(this).toggleClass('selected');
            alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
        }
    });
    })
        </script>


    <ul class="thumbnails image_picker_selector">
<li class="selected">
<div class="thumbnail selected">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-1.jpg">
</div>
</li>
<li class=""><div class="thumbnail selected">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-2.jpg">
</div>
</li>
<li class="">
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-3.jpg">
</div>
</li>
<li class="">
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-4.jpg">
</div>
</li>
<li>
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-5.jpg">
</div>
</li>
<li>
<div class="thumbnail">
<img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-6.jpg">
</div>
</li>
</ul>

编辑 - 如果有任何帮助，这是我遇到问题的网页。不幸的是，我对jQuery的了解非常糟糕。

http://style-card.co.uk/id/register/

编辑2 - 更新了我正在使用的代码。

Answer 1

您的代码存在一些问题。首先，请参阅this question，了解如何限制选择次数。

其次，您在image-picker可用之前附加了您的事件监听器。将脚本块移动到选择OR下面（这是最佳实践）将语句包装在ready语句中：

$(document).ready(function() {
    $('.image-picker').click(function() {
        ...
    });
});

您看到的错误消息可能是由以下几点引起的：

你确定在执行脚本时加载了jQuery吗？

您使用的是jQuery.noConflict吗？

Answer 2

确定。现在单击是您/可以/使用的事件，但您仍然需要使用.on（）。您使用的插件会对DOM进行更改，而.click（）是脆弱的...它不适用于动态添加的元素。尝试这样的事情：

jQuery(function($){
   $(document).on('click', 'ul.image_picker_selector li', function() {
    $(this).toggleClass('selected');

    if ($('.selected').length > 3) {
        $(this).toggleClass('selected');
        alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
    }
});
})

然而，这里的主要问题是它可能无法停止选择。您可能想要尝试的是寻找'mousedown'。如果您拦截了mousedown，理论上可以在选择之前捕获选择，如果您已经达到三个，则取消选择。在这种情况下，您可能希望执行以下操作：

jQuery(function($){
   $(document).on('mousedown', 'ul.image_picker_selector li', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    // get the number of items already selected:
    var ctSelected = $(this).siblings('.selected').length;

    if (ctSelected === 3) {
        alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
    } else {
        $(this).toggleClass('selected');
    }
});
})

不幸的是，我没有时间来jsFiddle这个例子，但希望这能让你了解一种可能对你有帮助的方法。

[增订] 我今天有空闲时间，并且认为我会使用插件代码。请参阅我的jsFiddle如何使用它的示例：http://jsfiddle.net/mori57/L5EMy/ ...您可以从https://github.com/jbatchelor/image-picker下载更新的插件

基本上，为您的选择标记添加数据限制：

<select class="image_picker" data-limit="3" ...etc>

然后，在您设置图像选择器的代码中，但在实例化图像选择器本身之前：

var limitReached = function(){
    alert("Hit the limit! Please deselect an image if you want to choose another!");
};

$(".image_picker").imagepicker({
    limit_reached: limitReached
});

这意味着你应该能够摆脱所有其他的东西（试图捕捉并对mousedown事件做出反应）。

Answer 3

这会有用吗？

$('.image-picker').click(function() {
        if ($('.selected').length < 3) {
            $(this).toggleClass('selected');
        else
            alert('You have already selected 3 items!\nYou can undo a selection.');
        }
    });

Answer 4

如果您收到此错误，

Uncaught TypeError: Property '$' of object [object Object] is not a function

你必须遇到问题jQuery.js文件。通过在控制台上键入jQuery或$来检查是否加载了jQuery。

$(function () {
    $('.image-picker option').click(function () {
        if ($(this).is(":selected")) {
            $(this).toggleClass('selected');
            if ($(this).siblings("option:selected").andSelf().length > 3) {
                $(this).toggleClass('selected');
                alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
                $(this).removeAttr("selected");
            }
        }
    });
});

DEMO

Answer 5

感谢mori57我已将此功能添加到最新版本的脚本

https://github.com/rvera/image-picker/pull/6

如何在wordpress中将多选中选项的数量限制为3

5 个答案: