0

这是我在使用 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 - 更新了我正在使用的代码。

4

5 回答 5

1

您的代码有几个问题。首先，请参阅this question about how to limit the number of selections。

其次，您在image-picker可用之前附加您的事件侦听器。将脚本块移动到您的选择下方或（这是最佳做法）将您的语句包装在ready语句中：

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

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

您确定在执行脚本时已加载 jQuery 吗？

你在使用jQuery.noConflict吗？

于 2013-05-21T13:21:10.757 回答
1

好的。Click 现在是您/可以/使用的事件，但您仍然需要使用 .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 事件）。

于 2013-05-21T13:34:04.737 回答
0

这行得通吗？

$('.image-picker').click(function() {
        if ($('.selected').length < 3) {
            $(this).toggleClass('selected');
        else
            alert('You have already selected 3 items!\nYou can undo a selection.');
        }
    });
于 2013-05-21T13:18:26.920 回答
0

如果您收到此错误，

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");
            }
        }
    });
});

演示

于 2013-05-21T13:33:57.987 回答
0

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

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

于 2013-05-25T01:25:49.167 回答