自定義jQuery燈箱不能在Wordpress站點上工作

當我使用HTML代碼離線運行代碼並調用JQuery庫時，它可以正常工作。但是，當我嘗試在我的WordPress網站上實現它時，它根本不起作用。自定義jQuery燈箱不能在Wordpress站點上工作

1）我添加腳本代碼到我的模板的頁腳的（a）

2）我稱爲我的模板的標題jQuery庫（b）中我還試圖測試不同但我沒有成功。

3） CSS類被添加到我的模板CSS文件。（三）

4）我宣佈啓動按鈕（就是我要開始燈箱）的說明類

誰能幫助我瞭解什麼可能是錯誤的，以及如何解決這個問題？

非常感謝！

（a）中的腳本添加到頁腳

<script> 

    $(document).ready(function() { 
     $('.lightbox').click(function() { 
      $('.background-map-lightbox, .map-lightbox').animate({'opacity':'.60'}, 500, 'linear'); 
      $('.map-lightbox').animate({'opacity':'1'}, 500, 'linear'); 
      $('.background-map-lightbox, .map-lightbox').css('display','block'); 

     }); 

     $('.close-map-lightbox').click(function() { 

      $('.map-lightbox, .background-map-lightbox').animate({'opacity':'.0'}, 500, 'linear', function() { 
       $('.map-lightbox, .background-map-lightbox').css('display','none'); 

       }); 

     }); 

     $('.background-map-lightbox').click(function() { 

      $('.map-lightbox, .background-map-lightbox').animate({'opacity':'.0'}, 500, 'linear', function() { 
       $('.map-lightbox, .background-map-lightbox').css('display','none'); 

       }); 

     }); 

    }); 

</script>

（b）在模板

//test 1 
<?php wp_enqueue_script ("jquery");?> 

//test 2 
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.1.min.js" type="text/javascript"></script>

（c）中的CSS

.lightbox { 
    color:green; 

} 

.background-map-lightbox{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    opacity:.0; 
    -moz-opacity:.0; 
    filter:alpha (opacity=0); 
    z-index:100; 
    display:none; 

} 

.map-lightbox { 
    background-color: #ffffff; 
    border-left: 13px solid #eba096; 
    border-radius: 22px; 
    box-shadow: 2px 2px 2px #333333; 
    color: black; 
    display: none; 
    height: 303px; 
    left: 30%; 
    padding: 20px; 
    position: absolute; 
    top: 20%; 
    width: 540px; 
    z-index: 101; 
} 

.close-map-lightbox { 
    float:right; 
    cursor:pointer; 
    background-color:#a6d5b3; 
    border:solid 1px #e6e6e6; 
    width:25px; 
    height:25px; 
    border-radius:40px; 
    color:#fff; 
    font-family:"Open Sans"; 
    top:-27px; 
    right:-27px; 
    position:relative; 
    text-align:center; 

} 

#map-ebook-title h1 { 
    color: #8a8198; 
    font-family: "Open Sans"; 
    font-size: 62px; 
    font-style: italic; 
    font-weight: bold; 
    line-height: 43px; 
    margin: 15px; 
    text-transform: uppercase; 
    -webkit-font-smoothing: antialiased; 
} 

#map-ebook-title h2 { 
    color: #4d4d4d; 
    font-family: "Open Sans Semibold"; 
    font-size: 23px; 
    font-style: italic; 
    font-weight: bold; 
    line-height: 43px; 
    margin: 30px 15px; 
}

來源

2014-07-09 user3819580

你在控制檯遇到什麼錯誤？ – designtocode

...引用@msbodetti - 你有一些錯誤？ jquery庫是否正確加載？嘗試使用'console.log（）'或JavaScript中的某些斷點來知道腳本是否被觸發。 – Frogmouth

的WordPress的報頭jQuery使用非衝突。我使用的方法是將'$'換成單詞jQuery。

使用Chrome瀏覽器，如果您在屏幕上的任何元素上單擊f12，都會有一個選項來檢查元素，單擊它然後在彈出的新屏幕上進行控制檯。它會顯示你JS錯誤。

來源

2014-07-09 16:05:59 David

自定義jQuery燈箱不能在Wordpress站點上工作

回答

相關問題