启动 jQuery 脚本在放置在控制台时有效，但在放置到站点代码时无效答案

【问题标题】：Initiating jQuery script works when placed in console but not when placed into site code启动 jQuery 脚本在放置在控制台时有效，但在放置到站点代码时无效
【发布时间】：2020-02-02 17:43:17
【问题描述】：

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

我不太需要代码方面的帮助，您也不需要了解有关图像框的布局或创建的任何信息。相信这段代码是有效的。

我有几个功能：

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 网站的页脚运行。为此，我使用“页眉和页脚脚本”插件将脚本的 sn-ps 放入页脚。

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

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>

CSS：

/* ZOOMABLE IMAGE */
.case-study-slider-image,
.photo {
    cursor: zoom-in;
}
#image-zoom-contain {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000000;
}
    #image-zoom-contain.open {
        display: block!important;
    }
.image-zoom-inner {
    width: auto;
    height: calc(100% - 80px);
    margin: 20px auto;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 151;
}
.image-zoomer {
    max-width: 100%;
    max-height: 100%;
    background-color: rgba(7,30,68,1);
    padding: 10px;
    border-radius: 10px;
}
/* END ZOOMABLE IMAGE */

【问题讨论】：

如果它在控制台中有效但在 JS 文件中无效，那么您可能在页面中执行逻辑太早，在 DOM 加载之前。使用 document.ready 处理程序或将 <script> 引用移动到 </body> 之前。另请注意，代码可能会被大量 DRYd，并且您根本不需要几个 if 条件。
我同意这不是最优雅的解决方案，我现在就试试 doc.ready。
@RoryMcCrossan - 没有修复它，我确信它会。

标签： javascript jquery wordpress function

【解决方案1】：

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

$(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 以毫秒为单位

【讨论】：

这并不能解决它...我真的以为它会。
尝试使用 setTimeout 引入等待
请举个例子？
@JasonIsMyName 检查更新的答案，所以基本上它会在执行代码之前等待 500 毫秒
是的兄弟，天才！

【解决方案2】：

可能你的<div class="photo"> 在页面加载后渲染

因此，您可以尝试替换

productImageZoom.click(function () {

到

$(document).on("click",'.photo',function() {

不知道productImageZoom 长度如果不工作

var productImageZoom = $('.photo');

console.log(productImageZoom.length);

【讨论】：