Javascript 优化jQuery扰流板按钮

HTML

---

我不熟悉jQuery和Javascript，所以我制作了这个简单的脚本来显示和隐藏段落，并在单击时更改按钮文本。我的问题是这看起来有点笨重。有没有更好、更短、更简单的方法来实现相同的结果？

您可以使用Aweasome jquery使用简单的3行代码来实现这一点。触发按钮点击事件，点击->切换元素“P”。这将有助于：

---

首先，jQuery已经为您跨浏览器规范化了DOM事件侦听器，因此不再需要使用

bindEvent

函数。这是一个简单的方法，使用一些你可以在网上查到的东西来做你正在做的事情

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

以下是一些需要注意的事项：

• 您的示例功能假定一个扰流板

  #p1

  和一个显示按钮

  #b1

  。在生产中，这可能基于类，如

  .spoiler

  和

  .spoiler trigger

  ，并且一个页面上会有多个扰流板。在这种情况下，您需要获得this的值。在本例中，让我们假设“显示”按钮始终是扰流板本身的兄弟按钮

  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)
  })
  

• jQuery

  .on

  方法是您希望开始使用的跨浏览器事件侦听器函数

• 我们反复使用的jQuery选择器，如

  $（this）

  或

  $（'#b1'）

  ，应该缓存在本地变量中以提高性能
• 我使用三元条件而不是if语句来确定显示/隐藏文本应该是什么，因为在这个非常简单的情况下，我认为它更可读。

---

谢谢你的回答，效果非常好。但是，我有一个问题，为什么可以省略分号，例如at

$thispoiler.toggle（'blind'）

和

$this.text（newText）

我编写的JavaScript分号非常少。这是一个个人的选择，帮助我坚持使用更简单的代码并注意逻辑错误。JavaScript是一种奇怪的语言，因为它的官方规范需要分号，但同一规范包含一个“自动插入分号”例程，使得它们在所有情况下都不必要，但不明确的情况除外。你可能会和其他认为我的代码愚蠢的人说话。解释这个有点争议的话题。：）

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

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)
})

$('.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)
})