0

我在下面有这段代码。当我运行应用程序并单击“栏”时，The not 'current' div has been clicked会显示该消息。然后，如果我单击“foo”，则不会显示该消息。我预计会显示该消息，因为我已经在current两者之间交换了课程divs。

<div class="current">foo</div>
<div>bar</div>

$('document').ready(function(){
    $('div').not('.current').on('click', function(){
        alert("The not 'current' div has been clicked.")
        var aux = $(this);
        $('div').removeClass('current');
        aux.addClass('current');
    });
});
4

4 回答 4

1

您只需将单击事件添加到“非当前”元素，并且当您切换类时，其中一个元素仍然没有单击事件。相反，您可以这样做：

$('document').ready(function(){
    $('div').on('click', function(){
        if ($(this).hasClass("current")){
            return;
        }

        alert("The not 'current' div has been clicked.")
        var aux = $(this);
        $('div').removeClass('current');
        aux.addClass('current');
    });
});
于 2013-05-10T11:37:39.777 回答
0

在 DOM 准备就绪时，您只为没有 class 的 div 分配了 click 事件current。因此，代码不起作用。您需要将点击事件分配给所有 div 并检查其中的类，如：

$('div').on('click', function (e) {
    if (e.target.className === 'current') return;
    console.log("The not 'current' div has been clicked.")
    var $aux = $(this);
    $('div').removeClass('current');
    $aux.addClass('current');
});
于 2013-05-10T11:44:24.657 回答
0

我认为你想要的是点击一个没有.current类的 div 会得到点击事件并交换.current类，因为你正在用 jQuery 操作 dom 并交换类，它没有得到应用的新类，它获取页面准备就绪时加载的元素，因此您可以将事件委托给document并且您将获得所需的内容：

$(document).on('click', 'div:not(.current)', function () {
  alert("The not 'current' div has been clicked.");
  var aux = $(this);
  $('div').removeClass('current');
  aux.addClass('current');
});

试试这个小提琴

于 2013-05-10T11:55:32.407 回答
0

使用此代码：

$('document').ready(function(){
    $('div').on('click', function(){
        if($(this).hasClass('current')) return;

        alert("The not 'current' div has been clicked.")
        var aux = $(this);
        $('div').removeClass('current');
        aux.addClass('current');
    });
});

检查回调中的类；）

jsfiddle在这里：http: //jsfiddle.net/5hFv4/

于 2013-05-10T11:37:57.357 回答