我如何让 JavaScript 识别何时单击 wordpress link？

Question

对于我的站点：http://rydalmereprestige.com.au/

我正在尝试使用 JavaScript 和 css 实现弹出横幅。

我已经设法让脚本在这里工作：http://jsfiddle.net/qdor8usL/3/

$('.menu-item-21').click(function () {
    $("#popups_about").css('visibility', 'visible');
    $("#popups_services").css('visibility', 'hidden');
    $("#popups_quote").css('visibility', 'hidden');
    $("#popups_contact").css('visibility', 'hidden');
    $("#popups_about").slideUp(0)
        .delay(2000)
        .slideDown(1000);
});

$('.menu-item-486').click(function () {
    $("#popups_about").css('visibility', 'hidden');
    $("#popups_services").css('visibility', 'visible');
    $("#popups_quote").css('visibility', 'hidden');
    $("#popups_contact").css('visibility', 'hidden');
    $("#popups_services").slideUp(0)
        .delay(2000)
        .slideDown(1000);
});

$('.menu-item-733').click(function () {
    $("#popups_about").css('visibility', 'hidden');
    $("#popups_services").css('visibility', 'hidden');
    $("#popups_quote").css('visibility', 'visible');
    $("#popups_contact").css('visibility', 'hidden');
    $("#popups_quote").slideUp(0)
        .delay(2000)
        .slideDown(1000);
});

$('.menu-item-17').click(function () {
    $("#popups_about").css('visibility', 'hidden');
    $("#popups_services").css('visibility', 'hidden');
    $("#popups_quote").css('visibility', 'hidden');
    $("#popups_contact").css('visibility', 'visible');
    $("#popups_contact").slideUp(0)
        .delay(2000)
        .slideDown(1000);
});

但是当我将它应用到我的网站时 - 它就是不显示。

前提是点击顶部的每个菜单项 - 应该弹出不同的横幅。

供参考，以上代码在主题文件中实现：

header.php - javascript
footer.php - div tags
style.css - css

Answer 1

如果它在 jsfiddle 上运行但在您的网站上不起作用，则很可能是您网站上的外部因素。

您是否引用了正确的 jquery 库？

Answer 2

像这样包装你的代码，它应该可以工作：

$(document).ready(function(){

    // $('.menu-item-21').click....

});

问题是代码是在 .menu-item-# 创建之前执行的。

我如何让 JavaScript 识别何时单击 wordpress link？

How do I get JavaScript to recognise when a wordpress link is clicked?

html

javascript

css

wordpress

jquery