Question

我有一个功能，点击＆＃39;事件。点击＆＃39;点击＆＃39;正在被攻击我需要一个条件语句来根据点击的按钮做一些事情。我把一些代码放得更清楚：

ul和The a：

<ul>
<li class="menu first"><a href="link/to/somwhere"></a></li>
<li class="menu second"><a href="link/to/somwhere"></a></li>
<li class="menu third"><a href="link/to/somwhere"></a></li>
<li class="menu fourth"><a href="link/to/somwhere"></a></li>
</ul>
<a class="logo" href="link/to/somwhere"></a>

jQuery：

$('.menu, .logo').on('click','a',function(e){
        var href = $(this).attr('href');
        $(this).data('clicked', true);
        if ($('.first a').data('clicked')) { 
        // do things reserved only for .first button
        }
        else if ($('.logo a').data('clicked')) { 
        // do things reserve only for .logo link
        }
        else { 
        // do things reserved for every other buttons 
        }
        goTo(href);
});

function goTo(href) {
    $.ajax({
        url: href,
        success: function(data) {
          // some code
        }
    });
}

我的问题是，当我点击菜单按钮时，它只是不起作用。我想让它做点什么，加速点击了哪个按钮。当我点击＆＃39; .first＆＃39;它有效，当我点击＆＃39; .logo＆＃39;它也有效，但第三个，其他＆＃39;正在被省略。

Answer 1

与.data()的整个交易似乎是一种圆满的方式：

if ($(this).is('.menu a')) {
  // menu button, or ".first a" for just the first one, etc
}
else if ($(this).is('.logo')) {
  // the logo button
}

Answer 2

else if ($('.logo a').data('clicked')) {

关闭原来的.on（）事件：

$('.menu, .logo').on('click','a',function(e){
  //DO STUFF

}); //Closing curly brace and paren

Answer 3

如果您尝试根据使用数据元素单击的内容进行操作，那么您就会遇到麻烦。您正在使用ajax加载页面而无需重新设置数据 - 如果您单击第一个然后单击第二个，则第一个仍然可以使数据（'clicked'）为真。

加上已经指出的缺失括号。

建议：

$('.menu, .logo').on('click','a',function(e){
        var href = $(this).attr('href');
        if ( $(this).hasClass('first') ) { 
        // do things reserved only for .first button
        }
        else if( $(this).hasClass('logo') ) { 
        // do things reserve only for .logo link
        }
        else { 
        // do things reserved for every other buttons 
        }
        goTo(href);
}

Answer 4

重写代码：

在您之前将其设置为true时，不确定为什么要检查data。对我来说没有任何意义，也许你想检查用户之前是否已经点击过它？

// declare outside event as it is not clear from your provided code where this belongs
function goTo(href) {
    $.ajax({ url: href }).done(function(){
        // some code
    });
}

$('.menu, .logo').on('click','a',function(ev){
    var el = $(this), // let's do this once
        hasClicked = el.data('clicked'), // let's do this once
        parent = el.parent(),
        href = el.prop('href'); // use .prop() when dealing with actual properties

    ev.preventDefault(); // prevent the link from it's intentional behaviour

    // why mess with data here? Do it after you've done whatever it is you have to do or it doesn't makes sense you're gonna check it?
    //el.data('clicked', true);

    // use !hasClicked to reverse the condition(s)
    if (parent.hasClass('first') && hasClicked) {
        // do things reserved only for .first button
    } else if (parent.hasClass('.logo') && hasClicked) { 
        // do things reserve only for .logo link
    } else { 
        // do things reserved for every other buttons 
    }

    // wild guess this belongs here
    el.data('clicked', true);

    goTo(href);

});

如何在我的jQuery中正确使用'else if'？

4 个答案: