0

私は何かをするための最良の方法を探しています。さまざまなカテゴリのリストがあります。リスト項目はすべてクリック可能です。ユーザーに 1 ～ 3 個のアイテムを選択してもらいたい。

彼が何かをクリックすると、選択したクラスが li に追加されます。同じアイテムをもう一度クリックすると、クラスが削除されます (ToggleClass() )。

選択したクラスを持つアイテムの数をカウントする条件で、その全体をラップします。ここに私が今どこにいるかのフィドルがあります：

http://jsfiddle.net/nfQum/1/

私の問題は、3 つの項目を選択した場合、if ステートメントがそれをブロックしているため、「1 つを選択解除」できないことです。ここでの解決策は何ですか? (また、このコードは実際には最善の方法ではないと感じています)

コード (上記の Fidlle と同じ)

HTML

<ul>
  <li class="chooseCategory16"><a onclick="test(16); return false;" href="#">test1</a></li>
  ...
</ul>

JS

function test(number) {
  if ( $("li.selected").length <= 2) {
     if( $("li.chooseCategory"+ number +"").hasClass("selected")) {                
         $("li.chooseCategory"+ number +"").removeClass("selected");
     } else {
         $("li.chooseCategory"+ number +"").addClass("selected");
     }
   }
}

</p>

4

5 に答える 5

2

まず、インラインJavaScriptの使用を避けることは非常に良い習慣です。jQueryを使用すると、マークアップにjavascriptを含めるのではなく、イベントを要素にバインドするのが非常に簡単になります。私の例は、コンテナに基づいてイベントをそれらのアイテムにバインドする方法を示しています。イベントを各アイテムにバインドするのではなく、デリゲートイベント（単一のイベントがコンテナーにバインドされてからコンテキストをチェックするイベント）を使用するため、パフォーマンスも向上します。

デモ： http： //jsfiddle.net/nate/nfQum/5/

$('.choose').on('click', 'li', function (event) {
        // save a reference to the container ul
    var $container = $(event.delegateTarget),
        // save a reference to the li that was clicked
        $element = $(event.currentTarget);

    // if the li has the selected class...
    if ($element.hasClass('selected')) {
        // ...remove it!
        $element.removeClass('selected');
    } else {
        // if it doesn't have the selected class, check whether
        // the container has fewer than three children with the
        // selected class
        if ($container.children('.selected').length < 3) {
            // if so, go ahead and add selected to this item
            $element.addClass('selected')
        }
    }
});
于 2012-09-11T14:55:43.980 に答える
2

人々がタスクを正しく実行している場合は (UI を邪魔にならないようにして) タスクを続行させるという原則に従い、問題の内容とその解決方法に関する明確な情報でエラーをインターセプトすることを提案します。使用している方法と同じですが、モーダル ウィンドウを使用して、選択した項目が多すぎる場合にユーザーに通知します。

または、ユーザーが確実に見ることができる方法で実行できる場合は、リストの近くで状況依存メッセージを使用できます。問題を認識しないままにしておきたくありません。

function test(number) {
    // always run this to allow removal of class when too many are selected
    if ($("li.chooseCategory" + number + "").hasClass("selected")) {
        $("li.chooseCategory" + number + "").removeClass("selected");
    } else {
        // move this condition inside the else
        if ($("li.selected").length <= 2) {
            $("li.chooseCategory" + number + "").addClass("selected");
        } else {
            // add notification of problem and how to solve
            // a modal window, or context sensitive help here
            alert('you can only select 3 - please deselct one!')
        }
    }
}​

デモ: http://jsfiddle.net/nfQum/2/

于 2012-09-11T14:50:59.100 に答える
1 
function test(number) {
    if ($("li.selected").length <= 2)
        {
            if($("li.chooseCategory"+ number +"").hasClass("selected")) {

                $("li.chooseCategory"+ number +"").removeClass("selected");
            }else {
                $("li.chooseCategory"+ number +"").addClass("selected");
            }
        } else {
            if( $(event.target).parent().hasClass("selected") ) {
                 $(event.target).parent().removeClass("selected");
            }                
        }
}

else部分は、選択したliの選択を解除します。http://jsfiddle.net/uznbu/1/

于 2012-09-11T14:54:18.603 に答える
1

インライン JavaScript を避けるのが最善なので、もう少し jQuerified にしました。

http://jsfiddle.net/nfQum/7/

$('li.category').on('click',function(){
    var $this = $(this); //store you jquery object - this referes to the element clicked

    if ($this.hasClass("selected")) {
        $this.removeClass("selected");
    }else{
        if ($('li.selected').length !== 3){
            $this.addClass("selected");
        }
    }
});
于 2012-09-11T15:06:29.420 に答える
0

インライン ハンドラーを削除して、次の操作を行います。

$('ul li a').on('click', function(e) {
    e.preventDefault();
    $(this).parent('li')[$('li.selected').length>2?'removeClass':'toggleClass']('selected');
});

フィドル

于 2012-09-11T14:58:08.620 に答える