優化jQuery的擾流板按鈕

HTML優化jQuery的擾流板按鈕

<!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>

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所以我做了這個簡單的腳本來顯示和隱藏段落和更改按鈕文本時點擊。我的問題是這看起來有點笨重。有更好，更短，更簡單的方法來達到同樣的效果嗎？

來源

2012-06-24 Etcher

首先，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語句來確定顯示/隱藏文本應該是什麼，因爲在這種非常簡單的情況下，我認爲它更具可讀性。

來源

2012-06-24 22:20:31 zetlen

感謝您的回答，完美的作品。然而，我有一個問題，爲什麼你可以省略分號，比如'$ thisSpoiler.toggle（'blind'）'和'$ this.text（newText）' – Etcher

我寫的分號很低的JavaScript。這是個人選擇，可以幫助我堅持簡單的代碼並注意邏輯錯誤。 JavaScript是一種奇怪的語言，因爲它的官方規範要求使用分號，但是同樣的規範包含了一個「自動分號插入」例程，這使得它們在除了不明確的情況之外都是不必要的。你可能會和其他人認爲我的代碼很愚蠢。 [這是一篇文章]（http://inimino.org/~inimino/blog/javascript_semicolons）解釋這個稍有爭議的話題。 :) – zetlen

你可以用簡單的3行代碼使用真棒jQuery來完成這項工作。觸發按鈕點擊事件，並點擊 - >切換元素'P'。這應有助於：working demo所有的

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

來源

2012-06-24 22:19:25

優化jQuery的擾流板按鈕

回答

相關問題