Wordpress中Javascript的匿名功能/引用錯誤

Question

我很難讓我的JavaScript代碼與在Wordpress中構建的網站一起使用。 我有一個jsfiddle，您可以在這里找到： http : //jsfiddle.net/sarahk3112/aw5xR/13/

這並不是我想要的樣式，而是通過上下滑動並在具有子導航的“作品集”和“關於”鏈接之間切換來顯示所需的效果。 因此，它在這里可以完美運行，但是當我在Wordpress頁面模板中實現相同的確切代碼時，它將無法正常工作。 Wordpress網站目前處於維護模式，因為我需要修復此問題，因此除非絕對必要，否則我無法將您指向該網站的實時鏈接（這是一個客戶端網站，他們還沒有准備好上線）。

這是我單擊“作品集”時Safari顯示的錯誤：

（匿名函數）-moderndayfloral.com

當我單擊“投資組合”時，Chrome顯示錯誤：

未被捕獲的ReferenceError：未定義slideonlyone

這是我的functions.js文件中的Javascript代碼：

    jQuery(document).ready(function(){
    function slideonlyone(thechosenone) {
    $('span[class|="subnav"]').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
    if ($(this).css('display') == 'block') {
        $(this).hide(200);
    }
    else {
        $(this).show(200);
        }
    }
    else {
    $(this).hide(200);
    }
    });
    }
    });

這是我的頁面模板文件中的html代碼：

    <ul id="hometopnav">
    <li><a id="portfolio" href="javascript:slideonlyone('portfolio');" >portfolio</a>
    <span id="portfolio" style="display: none;" class="subnav">     
    <img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
    <a href="/weddings">weddings</a>
    <a href="/events">events</a>
    </span>
    </li>
    <li><a href="/eventdesign">event design</a></li>    
    <li><a href="/boutique">boutique</a></li>
    <li><a id="about" href="javascript:slideonlyone('about');" >about</a>
    <span id="about" style="display: none;" class="subnav">     
    <img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
    <a href="/philosophy">philosophy</a>
    <a href="/services">services</a>
    <a href="/jenn">jenn</a>
    </span>
    </li>
    <li><a href="/thanks">thanks</a></li>
    <li><a href="/accolades">accolades</a></li>
    <li><a href="/blog">blog</a></li>
    <li><a href="/contact">contact</a></li>
    </ul>

我希望這是足夠的信息以尋求幫助。 我被困在一塊岩石和堅硬的地方之間，無法將其變為現實，因此您可以看到。 我知道Javascript在涉及Wordpress時需要多加注意，因此，我感謝能提供的任何幫助。 如果還有其他我可以提供的信息，請告訴我！

謝謝你的時間！

Answer 1

您不需要將功能包裝在文檔上，也不需要在加載dom后立即執行任何功能，並且您可以檢查display的錯誤display如inline顯示中的show轉換：

var jQuery = {};
jQuery = jQuery.noConflict(true);
function slideonlyone(thechosenone) {
    jQuery('span').closest('.subnav').each(function(index) {
        if (jQuery(this).attr("id") == thechosenone) {
            if (jQuery(this).css('display') != 'none') {
                jQuery(this).hide(200);
            } else {
                jQuery(this).show(200);
            }
        }
    });
}