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>

編集 - これは、私が問題を抱えている Web ページです。残念ながら、私のjQueryの知識はかなり貧弱です。

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

EDIT 2 - 使用しているコードを更新しました。

4

5 に答える 5

1

Ok。クリックは使用/できる/イベントになりましたが、.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」を探すことです。マウスダウンをインターセプトすると、理論的には、選択が行われる前にそれをキャッチでき、すでにカウントが 3 になっている場合は選択をキャンセルできます。この場合、次のようにするとよいでしょう。

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 タグに data-limit を追加します。

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

これは、他のすべてのものを取り除くことができるはずであることを意味します（マウスダウンイベントをキャプチャして反応しようとする）。

于 2013-05-21T13:34:04.737 に答える
0

mori57 のおかげで、この機能をスクリプトの最新バージョンに追加しました。

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

于 2013-05-25T01:25:49.167 に答える
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 に答える