1

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 的新手，所以我制作了这个简单的脚本来显示和隐藏段落，并在单击时更改按钮文本。我的问题是这似乎有点笨拙。有没有更好、更短、更简单的方法来达到同样的效果？

4

2 回答 2

1

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

$("#b1").click(function () {
      $("#p1").toggle('slow');
    });​
于 2012-06-24T22:19:25.890 回答
1

首先，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)or $('#b1')，应该缓存在局部变量中以提高性能。
  • 我使用三元条件而不是 if 语句来确定显示/隐藏文本应该是什么，因为在这个非常简单的情况下，我认为它更具可读性。
于 2012-06-24T22:20:31.390 回答