Question

如果单击特定按钮或者当前URL中包含特定查询字符串，我想运行一个函数。

这是我目前的职能：

$('#layout-toggle-01').on('click', function() {
    $(this).addClass('layout-active').parents('#events-cal').attr('class', 'events-3-col');
    $('#layout-toggle-02, #layout-toggle-03').removeClass('layout-active');
    $('#events-cont-02, #events-cont-03').hide();
    $('#events-cont-01').fadeIn();
    // Run 4:3 image height function
    fourThreeHeightFn();
  });

我可以为此函数添加if(window.location.href.indexOf("?view=columns") >= 0)条件，还是需要单独的函数？

Answer 1

但这可能会运行2次..

 $('#layout-toggle-01').on('click', function() {
     func($(this));
      });

    if(window.location.href.indexOf("?view=columns") >= 0){
     func($('#layout-toggle-01'));
    }

    function func(e){
       e.addClass('layout-active').parents('#events-cal').attr('class', 'events-3-col');
        $('#layout-toggle-02, #layout-toggle-03').removeClass('layout-active');
        $('#events-cont-02, #events-cont-03').hide();
        $('#events-cont-01').fadeIn();
        // Run 4:3 image height function
        fourThreeHeightFn();
        }

Answer 2

如果a）有正确的查询字符串或b）单击某个元素，听起来你想做各种各样的事情。我首先要定义一个你想要做的事情的函数。如下所示：

var doStuff = function () {
    $('#layout-toggle-01').addClass('layout-active').parents('#events-cal').attr('class', 'events-3-col');
    $('#layout-toggle-02, #layout-toggle-03').removeClass('layout-active');
    $('#events-cont-02, #events-cont-03').hide();
    $('#events-cont-01').fadeIn();
    // Run 4:3 image height function
    fourThreeHeightFn();
}

然后根据您的要求添加对该功能的调用。所以你会得到类似的东西：

$(function () {
    if (window.location.search.indexOf('columns') > 0) {
        doStuff();
    }

    $('#layout-toggle-01').on('click', function() {
        doStuff();
    });
});

由于看起来你正在构建一些切换布局的东西，你可以重构你的doStuff函数来使用传递给它的参数的值来改变所需的类而不是用特定的id值编码。

如果在URL中单击或查询字符串

2 个答案: