簡體   English   中英

將內聯javascript函數移至外部文件並轉換為jQuery

[英]Moving inline javascript function to external file and convert to jQuery

我正在嘗試優化phpBB3上的“擾流器” bbcode。

現在,我有一個可行的解決方案,但是每次使用“ spoiler” bbcode標記時,內聯javascript都會由phpBB注入。 我想調用一個通用函數,而不是每次使用bbcode時都將其內聯。

這是可工作的內聯javascript:

<div class="spoiler">
    <div class="spoiler-title">
        <span onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.parentNode.getElementsByTagName('a')[0].innerText = 'hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.parentNode.getElementsByTagName('a')[0].innerText = 'show'; }">
            <strong>{TEXT1}</strong> (<a href="#" class="spoiler-btn" title="Show hidden content">show</a>)
        </span>
    </div>
    <div class="spoiler-text">
        <div style="display: none;">
            {TEXT2}
        </div>
    </div>
</div>

為了便於閱讀,此處重復了內聯onclick函數:

if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
    this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
    this.parentNode.getElementsByTagName('a')[0].innerText = 'hide';
} else {
    this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
    this.parentNode.getElementsByTagName('a')[0].innerText = 'show';
}

單擊帶有“ spoiler-btn”類的錨點,上面帶有一個preventDefaults,以防止單擊將您帶到頁面頂部:

$(document).ready(function(){

    $(".spoiler-btn").click(
      function(e) {
        e.preventDefault();
      }
    );

});

我試圖用將“ this”傳遞到外部javascript文件的函數調用替換span onclick內聯javascript。 我似乎無法正常工作,因此我嘗試使用jQuery捕獲“ this”以遍歷DOM以查找“ spoiler-text” div中包含的“ div”並操縱display:none。 頁面上可以有多個這樣的spoiler標簽,所以我不能給“ spoiler-text” div內的div一個id。

在這里,我將跨度的onclick更改為外部函數:

onclick="spoilerToggle(this);"

然后,我的外部文件中將包含以下內容:

var spoilerToggle = function(param) {
    if ($(this).parent('div').parent('div').hasClass('spoiler-text').css('style') == 'none') {
        ($(this).parent('div').parent('div').hasClass('spoiler-text').removeAttr('style'));
        ($(this).parent('div').$('a').text('hide'));
    } else {
        ($(this).parent('div').parent('div').hasClass('spoiler-text').css('display', 'none'));
        ($(this).parent('div').$('a').text('show'));
    }
}

控制台然后給出以下錯誤:bbcode.js:22 Uncaught TypeError:$(...)。parent(...)。parent(...)。hasClass(...)。css不是函數

第22行是帶有“ if”檢查的行。

jQuery已加載到網站上,並且確保在body標簽關閉之前立即調用外部javascript文件。

我覺得我已經掉進兔子洞了,看不見光。 我敢肯定,這比我實際要做的要容易得多。

任何幫助是極大的贊賞。 謝謝!

.hasClass()返回一個布爾值,因此您不能在其后鏈接其他方法。 這就是為什么您得到引用的錯誤。

我將以另一種方式實現它:

 $(document).on("click", ".spoiler-title", function(e) { e.preventDefault(); var container = $(this).closest(".spoiler"); container.find(".spoiler-btn").text(function(i, currentText) { return currentText === "show" ? "hide" : "show" }); container.find(".spoiler-text div").toggle(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="spoiler"> <div class="spoiler-title"> <span> <strong>{TEXT1}</strong> (<a href="#" class="spoiler-btn" title="Show hidden content">show</a>) </span> </div> <div class="spoiler-text"> <div style="display: none;"> {TEXT2} </div> </div> </div> 

上面的代碼使用綁定到文檔的單個委托單擊處理程序來處理頁面上所有擾流器元素的單擊(您可以將其綁定到較低級別的容器元素,無論包含所有擾流器的最低層是什么)。

在處理程序中, this將引用clicked元素,因此使用DOM導航方法(如.closest().find()您可以向上至包含div的位置,然后向下至要操作的元素。 .closest()比嘗試鏈接.parent().parent()更為靈活,因為它會自動向上移動,直到找到與指定選擇器匹配的元素為止,因此,如果您以后更改HTML結構,JS可能不會需要改變。

如果.text()調用看起來令人困惑,那么jQuery將調用我傳遞給.text()的函數作為參數,將元素文本的當前值傳遞給該函數,然后返回的任何值將成為新文本。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM