优化 jQuery 剧透按钮

Optimizing jQuery Spoiler Button

本文关键字：按钮 剧透 jQuery 优化      更新时间：2023-09-26

HTML

<!doctype html>
<html>
<head>
</head>
<body>
<button id="b1" type="button">Show Spoiler</button>
<p id="p1" style="display:none"> This is a damn paragraph.</p>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

.JS

function bindEvent(element, eventName, eventHandler) {
    var el = $(element)[0];
    if (el.addEventListener) {
        el.addEventListener(eventName, eventHandler, false)
    } else if (el.attachEvent) {
        el.attachEvent('on'+eventName, eventHandler);
    }
}
bindEvent('#b1', 'click', function() {
    $('#p1').toggle('blind');
    if ($('#b1').text() == 'Show Spoiler') {
        $('#b1').text('Hide Spoiler');
    } else if ($('#b1').text() == 'Hide Spoiler') {
        $('#b1').text('Show Spoiler');
    }
});

我是jQuery和Javascript的新手，所以我制作了这个简单的脚本来显示和隐藏段落，并在单击时更改按钮文本。我的问题是这似乎有点笨拙。有没有更好、更短、更简单的方法来达到相同的结果？

首先，jQuery 已经跨浏览器为你规范化了 DOM 事件侦听器，所以你的bindEvent函数不再是必需的。这是一个简单的方法，使用一些你可以在jQuery API中查找的东西，做你正在做的事情。

var $b1 = $('#b1')
  , $p1 = $('#p1')
  , hideText = 'Hide Spoiler'
  , showText = 'Show Spoiler'
$b1.on('click',function() {
    var text = $b1.text()
      , newText = text === showText ? hideText : showText
    $p1.toggle('blind')
    $b1.text(newText)
})

以下是需要注意的几点：

  • 您的示例函数假定单个扰流板#p1和单个显示按钮#b1。在生产中，这可能基于类，如 .spoiler 和 .spoiler-trigger ，并且页面上会有多个剧透。在这种情况下，您需要获取 this 的值。在这个例子中，让我们假设显示按钮始终是剧透本身的同级。

    $('.spoiler-trigger').on('click',function() {
    var $this = $(this)
      , $thisSpoiler = $this.siblings('.spoiler').eq(0)
      , text = $this.text()
      , newText = text === showText ? hideText : showText
    $thisSpoiler.toggle('blind')
    $this.text(newText)
})

  • jQuery .on 方法是您想要开始使用的跨浏览器事件侦听器函数。

  • 我们反复使用的jQuery选择器，如$(this)或$('#b1')，应该缓存在局部变量中以提高性能。
  • 我使用三元条件而不是 if 语句来确定显示/隐藏文本应该是什么，因为在这个非常简单的情况下，我认为它更具可读性。

您可以使用很棒的jquery使用简单的3行代码来完成这项工作。 触发按钮单击事件，并在单击 -> 时切换元素"P"。这应该有帮助：工作演示

$("#b1").click(function () {
      $("#p1").toggle('slow');
    });​
相关文章：