5

2 つのボタンがあります。1 つをクリックすると、両方のボタンのクラスが交換されます。
クラスはselectedとunselectedです。

私の CodePen:
http://codepen.io/leongaban/pen/iLBvs

ここに画像の説明を入力

例: [ログイン] ボタンをクリックすると、選択されていないクラスが削除され、選択されたクラスが割り当てられ、[登録] ボタンに選択されていないクラスが割り当てられます。

問題は、register_unselectedクラスが機能しないことです。unselectedクラスは、私の jQuery でクリック アクションを持つクラスです。

灰色のボタンをクリックし続けて青色に変えることができるはずです。ただし、最初の灰色のボタン (ログイン) をクリックした後、新しい灰色のボタンの登録は機能しません。

Chrome のインスペクターを使用すると、register_unselected クラスが追加されていることがはっきりとわかりますが、クリック機能は機能しません。

ここに画像の説明を入力

何か案は？これにどのようにアプローチしますか？

// Login Tab (default : first)
$(".login_unselected").click(function(){

  console.log('clicked login');

  // Show Login Tab as selected
  $(this)
    .removeClass('login_unselected')
    .addClass('login_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_register')
    .removeClass('register_selected')
    .addClass('register_unselected');

});

// Register Tab
$(".register_unselected").click(function(){

  console.log('clicked register');

  // Show Login Tab as selected
  $(this)
    .removeClass('register_unselected')
    .addClass('register_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_login')
    .removeClass('login_selected')  
    .addClass('login_unselected');

});
4

5 に答える 5

2

より明白で洗練されたソリューションを提供した人はいません。

CSS を少しきれいにしましょう。

//instead of .login_unselected, .registerunselected  
.target {
      color: #ccc;
      background: #666;
      cursor: pointer;
}

//instead of .x_selected, .y_selected
.selected {
      color: #fff;
      background: #3399cc;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

したがって、HTMLは現在

<ul>
    <li id="tab_login" class="target">Login</li>
    <li id="tab_register" class="target">Register</li>
</ul>

jQuery は次のとおりです。

$("ul").on("click", ".target", function(){

      // Remove selected class from any that have it
      $(".target").removeClass('selected');
      // Add class to the one you're clicking on
      $(this).addClass('selected');

});

クラスを呼び出す代わりに、それを呼び出す.targetことができます.unselected。質問の文脈からすると、2 つの別個のクラスは必要ない可能性があります。クラスは多くの要素に適用されるように作成されており、それらを個別に参照する必要がある場合は、idすでに s があります。

また、要素に多くのクラスを適用し、最後のクラスに異なるプロパティ値を指定することで、1 つのクラスのスタイルをオーバーライドできることも覚えておいてください。オーバーライドするプロパティの値がオーバーライド クラスで指定されていない限り、最後に適用されたクラスは、既に適用されているすべてのクラスの設定をオーバーライドします。

于 2013-06-13T22:51:21.190 に答える
1

クラスに基づいてクリック ハンドラーを割り当てると、その時点でそのクラスに一致するボタンにハンドラーが設定されます。クラスを変更したからといって、それらが変更されることはありません。クリック時にどのクラスが設定されているかを検出し、それに応じて動作するクリック ハンドラーを実装する必要があります。

于 2013-06-13T22:23:43.233 に答える
1

これを行うこともできます

// Login Tab (default : first)
$(".login_unselected").click(function(){

  console.log('clicked login');

  // Show Login Tab as selected
  $(this)
    .removeClass('login_unselected')
    .addClass('login_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_register')
    .removeClass('register_selected')
    .addClass('register_unselected');

});
// Register Tab

$("#tab_register").click(function(){

  console.log('clicked register');
    if($(this).hasClass("register_unselected")){
  // Show Login Tab as selected
  $(this)
    .removeClass('register_unselected')
    .addClass('register_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_login')
    .removeClass('login_selected')  
    .addClass('login_unselected'); 
    }
});

ID を聞いて、それがこのクラスかどうかを確認します。

.on速いです

[http://www.jsperf.com/change-class-on-click]
于 2013-06-13T22:42:04.090 に答える