Question

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的新手所以我制作了这个简单的脚本来显示和隐藏段落，并在点击时更改按钮文本。我的问题是，这看起来有点笨重。是否有更好，更短，更简单的方法来实现相同的结果？

Answer 1

使用awesome jquery，您可以使用简单的3行代码完成此工作。触发按钮点击事件，然后点击 - ＆gt;切换元素'P'。这应该有所帮助：working demo

$("#b1").click(function () {
      $("#p1").toggle('slow');
    });

Answer 2

首先，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 Spoiler Button

2 个答案: