Question

如下所示，一个函数显示两个东西，另一个函数隐藏这两个东西。不知何故，他们是如此相似，我真的很想看看我是否可以将它们组合在一起，但我想不出办法。

var btns = {
    filterBtn: function () {
        $('.filter-btn').on('click', function () {
            $('.cover').show();
            $('.popup').show();
        })
    },
    popupClose: function () {
        $('.popup-x-btn').on('click', function () {
            $('.cover').hide();
            $('.popup').hide();
        })
    }
}

有人有什么建议吗？或者保留现状是最好的吗？

Answer 1

它的JS，你有很多可能性：

function toggle(selector, dir) {
    return function() {
        $(selector).on('click', function() {
            $('.cover')[dir]();
            $('.popup')[dir]();
        });
    };
}

var btns = {
    filterBtn: toggle('.filter-btn', 'show'),
    popupClose: toggle('.popup-x-btn', 'hide'),
}

但更好？嗯，那是个人意见。

关于JS的重要一点是你有很多方法可以做所有事情，困难的是找到一致的做事方式。这就是为什么人们使用更复杂的框架，如react，angular，ember，vue等等。

Answer 2

我能想到的最好的重构是使用jQuery.toggle()，您可以使用true来显示元素，或false来隐藏它：

＆＃13;

$('.showImage, .hideImage').on('click', function() {
  $('img').toggle($(this).hasClass('showImage'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showImage">Show</button>
<button class="hideImage">Hide</button>
<br>
<img src="https://placeimg.com/250/250/any">

＆＃13;

或者在你的情况下：

$('.filter-btn, .popup-x-btn').on('click', function() {
    $('.cover, .popup').toggle($(this).hasClass('filter-btn'));
});

Answer 3

您可以利用jQuery的toggle方法。

＆＃13;

function toggleCoverAndPopup(showOrHide) {
  $('.cover, .popup').toggle(showOrHide);
}

var btns = {
  filterBtn: function() {
    $('.filter-btn').on('click', function() {
      toggleCoverAndPopup(true);
    })
  },
  popupClose: function() {
    $('.popup-x-btn').on('click', function() {
      toggleCoverAndPopup(false);
    })
  }
}

＆＃13;

Answer 4

你可以用一个简单的if else语句来做到这一点。

$('.filter-btn .popup-x-btn').on('click', function() {
  if ($(this).hasClass("filter-btn")) {
    $('.cover').show();
    $('.popup').show();
  } else {
    $('.cover').hide();
    $('.popup').hide();
  }
});

是否有另一种方法来编码/组合这些？ JS

4 个答案: