jquery - 现在不推荐使用单击切换，我们该怎么办？

Question

我正在尝试弄清楚我们现在所做的点击切换已被弃用？

我正在寻找一些东西，所以如果你点击.wwd-content-container .wwd-content-each .wwd-extra-content-trigger它会向下滚动 100px，如果你再次点击它会向上滚动 100px。

$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').click(function(e) {
    var y = jQuery(window).scrollTop();
    jQuery(window).scrollTop(y+100);
});
$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').click(function(e) {
    var y = jQuery(window).scrollTop();
    jQuery(window).scrollTop(y-100);
});

有任何想法吗？谢谢，R

Answer 1

您使用变量设置标志或使用data()以跟踪：

$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').on('click', function (e) {
    var y      = $(window).scrollTop(),
        scroll = !$(this).data('clicked') ? (y+100) : (y-100);

    $(window).scrollTop(scroll);
    $(this).data('clicked', !$(this).data('clicked'));
});

小提琴

Answer 2

You can use a variable to set the state, a simplified example:

var active = false;

$('.wwd-content-container').click(function(e){
    if(!active){
        alert("First click");
        active = true;
    }else{
        alert("Second Click");
        active = false;
    }
});

LIVING DEMO

With your code:

var active = false;

$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').click(function(e){
    if(!active){
        var y = jQuery(window).scrollTop();
        jQuery(window).scrollTop(y+100);

        active = true;
    }else{
        var y = jQuery(window).scrollTop();
        jQuery(window).scrollTop(y-100);

        active = false;
    }
});

Answer 3

您可以像这样创建自己的替换：

$.fn.toggleClick = function() {
    var functions = arguments, iteration = 0;
    return this.click(function() {
        functions[iteration].apply(this, arguments);
        iteration = (iteration + 1) % functions.length;
    });
}

来源：http: //forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead

然后你可以像这样使用它，提供任意数量的函数作为参数：

$('#mydiv').toggleClick(
  function() { alert("do"); },
  function() { alert("some"); },
  function() { alert("stuff"); }
);

在你的情况下，你会这样做：

$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').toggleClick(
  function() {
    var y = jQuery(window).scrollTop();
    jQuery(window).scrollTop(y+100);
  },
  function() {
    var y = jQuery(window).scrollTop();
    jQuery(window).scrollTop(y-100);
  }
);