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

Posted 2023-05-09

【中文标题】启动 jQuery 脚本在放置在控制台时有效，但在放置到站点代码时无效

【英文标题】：Initiating jQuery script works when placed in console but not when placed into site code

【发布时间】：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" >
    </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 - 没有修复它，我确信它会。

【参考方案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);