Question

我正在尝试运行一小段jQuery - 当它被点击它运行一个函数时再次点击它会运行另一个。

我尝试了以下操作，但这甚至没有运行第一个。

$('body').on('click', '.card--small', function() {
    console.log('clicked');
    $(this).addClass('card--expanded');
    if (topCheck() == 'chrome') {
        $('.card--expanded .card--small__container').css({
            'top': '51px'
        });
    }
}, function() {
    console.log('clicked again');
    $(this).removeClass('card--expanded');
    if (topCheck() == 'chrome') {
        $('.card--expanded .card--small__container').css({
            'top': '0'
        });
    }
});

function topCheck() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('safari') != -1) {
        if (ua.indexOf('chrome') > -1) {
            console.log('Chrome');
        } else {
            return 'safari';
            console.log('Safari');
        }
    }
}

Answer 1

只需使用card--expanded类作为标志来确定您需要的点击并相应地设计您的功能。

$('body').on('click', '.card--small', function (e) {
    var self = $(this),
        isExpanded = self.hasClass('card--expanded'),
        isChrome = topCheck() === 'chrome'; // will always be false as topCheck never returns 'chrome' (it returns either 'safari' or undefined).
    self.toggleClass('card--expanded', !isExpanded);
    if (!isExpanded) {
        console.log('clicked');
        if (isChrome) { // will never execute as isChrome will always be false
            $('.card--expanded .card--small__container').css({
                'top': '51px'
            });
        }
    } else {
        console.log('clicked again');
        if (isChrome) { // will never execute as isChrome will always be false
            $('.card--expanded .card--small__container').css({
                'top': '0'
            });
        }
    }
});

重点是使用一些外部条件作为标志来跟踪点击状态。这可以是全局变量，也可以是作用域链中处理程序之上的局部变量（或CSS类，或HTML5数据属性等）。有很多方法可以做到这一点。在你的情况下，使用CSS类似乎很自然。

此外，如果topCheck函数有可能返回'chrome'，则会更好地编写function topCheck() { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('safari') > -1) { if (ua.indexOf('chrome') > -1) { return 'chrome'; console.log('Chrome'); } else { return 'safari'; console.log('Safari'); } } }函数：

function topCheck() {
    var ua = navigator.userAgent.toLowerCase(),
        browser = 'unknown';
    if (ua.indexOf('safari') > -1) {
        if (ua.indexOf('chrome') > -1) {
            browser = 'chrome';
            console.log('Chrome');
        } else {
            browser = 'safari';
            console.log('Safari');
        }
    }
    return browser;
}

或

{{1}}

就个人而言，我不喜欢每个函数的多个return语句，所以我会使用第二种形式。

Answer 2

$('.card--small').click( function(){
   // run function 1
   function_1();
   $(this).unbind('click').click( function(){
      // run function 2
      function_2();
   });
});

如果你想再次运行功能1，你必须重新点击$（＆＃39; .card - small＆＃39;）才能在点击时运行功能1。

Answer 3

在您的函数topCheck中，当您检测到Chrome时，不会返回任何内容。你只记录它。您的点击事件会调用topCheck函数，但在检测到Chrome时，该函数不会从该函数返回任何内容。所以你的if语句可能会得到一个未定义的值。

Answer 4

没有jQuery的简单方法。只需保持某种状态即可确定要做什么。

<html>
  <head>
    <style>
      div {
        background-color: #ff0;
      }
    </style>
    <script>
      var state = 0;

      function runIt() {
        if (state > 0) {
          doSomethingDifferent();
          state = 0;
          return;
        }
        doSomething();
        state = 1;
      }

      function doSomething() {
        alert("something");
      }

      function doSomethingDifferent() {
        alert("something different");
      }
    </script>
  </head>
  <body>
    <div onClick="runIt()">Click me</div>
  </body>
</html>

另一种方法是将click事件重新绑定到另一个函数。

Answer 5

要回答关于如何在点击时调用切换功能的原始问题，您的代码应如下所示：

function click1() {
  // ...
  $(this).off('click', click1).on('click', click2)
}

function click2() {
  // ...
  $(this).off('click', click2).on('click', click1)
}

$('#link').on('click', click1)

Live demo

但是从您的代码片段来看，在单个函数中实现切换会更简单：

$('body').on('click', '.card--small', function() {
    if (!$(this).hasClass('card--expanded') {
        $(this).addClass('card--expanded');
        if (topCheck() == 'chrome') {
            $('.card--expanded .card--small__container').css({
                'top': '51px'
            });
        }
    } else {
        $(this).removeClass('card--expanded');
        if (topCheck() == 'chrome') {
            $('.card--expanded .card--small__container').css({
                'top': '0'
            });
        }
    }
});

Answer 6

尝试

CSS

.card--small__container {
    top:0px;
    display:block;
    position:relative;
}

JS

$("body")
.on("click", ".card--small", function () {    
    if (topCheck() == "Chrome" 
       && !$(this).data("clicked") 
       && !$(this).hasClass("card--expanded")) {
        $(this).data("clicked", true)
            .addClass("card--expanded")
            .css("top", "51px");
    } else if ( !! $(this).data("clicked") 
              && $(this).hasClass("card--expanded")) {
        $(".card--small")
        .css("top", "0")
        .removeClass("card--expanded");
    }
});

function topCheck() {
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("chrome") !== -1 ? "Chrome" : "Safari"
};

http://jsfiddle.net/o4ebav8t/

jQuery单击以运行一个函数，再次单击以运行另一个函数

6 个答案: