5

我有 2 个按钮，单击一个将交换两个按钮的类。
类是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

9

当您调用$(".register_unselected").click()jQuery 时，实际上会在 DOM 中搜索任何匹配的元素.register_unselected，然后侦听它们上的点击事件。由于在调用此方法之前您的元素不会存在，因此这将无效。

相反，使用$("body").on("click", ".register_unselected", function(){});

您还可以替换body为另一个始终包含元素更改类的选择器。

编辑：这是一个分叉的 CodePen：http ://codepen.io/anon/pen/DqFuL

于 2013-06-13T22:21:19.583 回答
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。从您的问题的上下文来看，您可能不需要两个单独的类，类被应用于许多元素，如果您需要单独引用它们，那么您已经有了ids。

还要记住，您可以将许多类应用于一个元素，然后通过在最后一个类上指定不同的属性值来覆盖一个类的样式。最后应用的任何类都将覆盖已应用到它的任何类的设置，除非您希望覆盖的属性的值尚未在覆盖类中指定。

于 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 回答
1

用于.on()委托来自静态且包含两者的 dom 元素的点击事件。

因此，如果在页面加载时，您有：

<ul id="container">
    <li class="login_selected">Login</li>
    <li class="register_unselected">Register</li>
</ul>

然后，不要使用 .click()，而是执行以下操作：

$('#container').on('click', '.login_unselected', function(){
     //do stuff
});

和

$('#container').on('click', '.register_unselected', function(){
     //do stuff
});
于 2013-06-13T22:25:30.450 回答