0

以下のコードは、3 つのリスト要素が選択されているときに 4 番目の要素をクリックしようとすると、クラス「無効」とアラートを追加します。

現在行っていることではなく、3 番目の要素が選択/クリックされたときにクラスを追加し、4 番目の要素を選択しようとしているときにクラスを追加したいと考えています。もちろん、3つ以上の要素を選択しようとしたときにアラートを表示したい.

どうすればこれを達成できますか?

<script type="text/javascript">
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) {
            $(this).closest('.image_picker_selector').find('li:not(.selected)').addClass('disabled');
            alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
        } else {
            $(this).toggleClass('selected');
        }
        if (ctSelected < 3) {
            $(this).closest('.image_picker_selector').find('li:not(.selected)').removeClass('disabled');
        }

    });
})
</script>

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

1 に答える 1

0

toggleClass()これは、関数を長さの計算と比較の上に移動するだけで実現できます。

<script type="text/javascript">
jQuery(function($){

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

        // Do nothing if we are disabled
        if(  $(this).hasClass("disabled") ) return false;

        $(this).toggleClass('selected');

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

        if (ctSelected > 3) {
            $(this).closest('.image_picker_selector').find('li:not(.selected)').addClass('disabled');
            alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
        } else if ( ctSelected == 3) {
            $(this).closest('.image_picker_selector').find('li:not(.selected)').addClass('disabled');
        } else {
            $(this).closest('.image_picker_selector').find('li:not(.selected)').removeClass('disabled');
        } 

    });
});
</script>

ここに実用的なフィドルがあります：http://jsfiddle.net/jNLJG/1/

于 2013-05-22T19:00:16.290 に答える