Javascript 启动jQuery脚本在放入控制台时有效，但在放入站点代码时无效

我有一些代码，可以简单地打开一个框，在单击的图像中复制

我不太需要代码方面的帮助，您也不需要知道关于图像框的布局或创建的任何信息。只要相信这个密码是有效的

我有几个功能：

var caseStudySlider = $('.case-study-slider-image');
var productImageZoom = $('.photo');
if (caseStudySlider.length) {
    caseStudySlider.click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '').replace(/\"/gi, "");
        var targetZoomer = $('#image-zoomer');
        targetZoomer.attr("src", bg);
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {} else {
            zoomedImage.addClass('open');
        }
    });
}
if (productImageZoom.length) {
    productImageZoom.click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url("', '').replace('")', '').replace(/\"/gi, "");
        var targetZoomer = $('#image-zoomer');
        targetZoomer.attr("src", bg);
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {} else {
            zoomedImage.addClass('open');
        }
    });
}
if (productImageZoom.length || caseStudySlider.length) {
    $('.close-zoomed-image').click(function () {
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {
            zoomedImage.removeClass('open');
        } else {}
    });
}

它们被放置在脚本标记中，并从WordPress站点的页脚运行。为此，我使用“页眉和页脚脚本”插件将脚本片段放入页脚

脚本有两种用途，一种是在博客风格的页面上，另一种是在产品页面上。这两个触发器是在代码顶部定义的两个变量：

var caseStudySlider = $('.case-study-slider-image');
var productImageZoom = $('.photo');

该代码适用于caseStudySlider中的一个页面。但是，不适用于产品页面。但是，如果我将代码复制并粘贴到控制台中，它可以在两个页面上工作

我如何确定/强调可能出现这种情况的原因

其他代码是相关的，但不是回答问题所必需的，我不认为：

包括要填充的框：

<div id="image-zoom-contain" class="">
    <a href="javascript:void(0)" class="close-zoomed-image box-link"></a>
    <div class="image-zoom-inner">
        <img src="" id="image-zoomer" class="image-zoomer" alt="zoomed image">
    </div>
</div>

---

不管你在做什么，你做得太早了。使用这种方法

$(document).ready(function(){
  // Paste all of your jquery related code here
})

最新答复：

$(document).ready(function(){
   setTimeout(function(){
       // Paste all of your jquery related code here
   }, 500)
})

---

值500的单位是ms

无论你在做什么，你做得太早了。使用这种方法

$(document).ready(function(){
  // Paste all of your jquery related code here
})

最新答复：

$(document).ready(function(){
   setTimeout(function(){
       // Paste all of your jquery related code here
   }, 500)
})

值500以毫秒为单位，可能是页面加载后的

渲染

因此，你能试着更换吗

productImageZoom.click(function () { 

到

我想知道productImageZoom的长度是否有效

var productImageZoom = $('.photo');

console.log(productImageZoom.length);

可能是在页面加载后进行的

渲染

因此，你能试着更换吗

productImageZoom.click(function () { 

到

我想知道productImageZoom的长度是否有效

var productImageZoom = $('.photo');

console.log(productImageZoom.length);

---

如果它在控制台中工作，但不在JS文件中工作，那么您可能在加载DOM之前过早地在页面中执行逻辑。使用document.ready处理程序或将

引用移动到

之前。还要注意的是，代码可能会变得非常干涸，如果你根本不需要一些条件，那么就有一些条件。我同意这不是最优雅的解决方案，我现在就试试doc.ready。@Rorymcrossan-没有解决它，如果它在控制台中工作，但在JS文件中不工作，那么您可能在加载DOM之前过早地在页面中执行逻辑。使用document.ready处理程序或将

引用移动到

之前。还要注意的是，代码可能会非常严重地干涸，如果您根本不需要一些条件，则会出现一些条件。我同意这不是最优雅的解决方案，我会立即尝试doc.ready。@RoryMcCrossan-没有修复它，我确信它会。这不会修复它。。。我真的认为会。尝试使用setTimeOutput引入等待请提供一个示例？@JasonIsMyName检查更新的答案，因此基本上它将在执行代码之前等待500毫秒是的兄弟，天才！这并不能解决它。。。我真的认为会。尝试使用setTimeOutput引入等待请提供一个示例？@JasonIsMyName检查更新的答案，因此基本上它将在执行代码之前等待500毫秒是的兄弟，天才！