关键词：
【中文标题】启动 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);
【讨论】：
bash 脚本在启动时有效，在终端中无效
】bash脚本在启动时有效，在终端中无效【英文标题】：bashscriptworksonbootup,doesn\'tinterminal【发布时间】：2013-01-0804:34:46【问题描述】：我正在Amazonec2中创建一个服务器，并将一个bash脚本作为用户数据传递给它，该脚本在服务器首... 查看详情
组件属性在设计时有效，但在运行时无效
...这里下载组件源代码：http://www.shaneholmes.net/pasfiles/有一个控制台（Tco 查看详情
HTML5 视频未在 chrome 中加载，但在打开开发人员控制台时有效
】HTML5视频未在chrome中加载，但在打开开发人员控制台时有效【英文标题】：HTML5videonotloadinginchrome,butworkswhenthedeveloperconsoleisopenedup【发布时间】：2018-11-1501:36:51【问题描述】：我正在为客户开发一个Web应用程序，但HTML5视频标签... 查看详情
WP AJAX：nonce 在注销时有效，但在登录时无效
】WPAJAX：nonce在注销时有效，但在登录时无效【英文标题】：WPAJAX:nonceworkswhenloggedout,butnotwhenloggedin【发布时间】：2017-06-1205:03:34【问题描述】：我有一个WordPress网站，我将其配置为使用jQuery/AJAX在div框中查询和加载帖子。这是我... 查看详情
JS 代码在我将其粘贴到控制台时有效，但在我的 React 应用程序中不起作用
】JS代码在我将其粘贴到控制台时有效，但在我的React应用程序中不起作用【英文标题】：JScodeworkswhenipasteitonconsole,butdoesnotworkinsidemyReactApp【发布时间】：2021-12-0708:34:42【问题描述】：好的，代码如下：variyziInit=currency:"TRY",token:"2... 查看详情
程序在 C++ Tutor 中执行时有效，但在其他任何地方都无效
】程序在C++Tutor中执行时有效，但在其他任何地方都无效【英文标题】：ProgramworkswhenexecutedinC++Tutor,butnotanywhereelse【发布时间】：2019-09-0519:56:51【问题描述】：我正在编写一个遵循欧几里得算法的相当简单的程序（我们必须使用... 查看详情
with 关键字在打开文件时有效，但在调用函数时无效
】with关键字在打开文件时有效，但在调用函数时无效【英文标题】：withkeywordworkswhenopenningfilebutnotwhencallingafunction【发布时间】：2015-11-2521:49:52【问题描述】：我正在试验多处理模块并从this页面复制示例代码。这是一个例子：#!/... 查看详情
Vue 组件在“手动”多次使用时不会呈现......但在循环重复时有效
...Vue组件在“手动”多次使用时不会呈现......但在循环重复时有效【英文标题】：Vuecomponentsarenotrenderedwhenusedmultipletimes\'manually\'...butworkswhenrepeatedwiththeloop【发布时间】：2021-08-0915:16:20【问题描述】：我有如下代码。前5个组件正确... 查看详情
WebView JavaScript 链接在触摸时有效，但在使用轨迹球时无效
】WebViewJavaScript链接在触摸时有效，但在使用轨迹球时无效【英文标题】：WebViewJavaScriptlinksworkontouchbutnotwhenusingtrackball【发布时间】：2010-11-2615:48:52【问题描述】：我有一个简单的基于WebView的活动，它遵循Hello,WebView示例来启用Ja... 查看详情
创建CCtexture时找不到Spritebuilder文件，但在创建CCsprite时有效？
】创建CCtexture时找不到Spritebuilder文件，但在创建CCsprite时有效？【英文标题】：SpritebuilderfilenotfoundwhencreatingCCtexture,butworkswhencreatingCCsprite?【发布时间】：2015-01-1701:27:00【问题描述】：在我的游戏中，我最初使用以下代码创建精... 查看详情
无法在线在 Flash Player 10+ 中写入本地文件（但在本地使用时有效）
】无法在线在FlashPlayer10+中写入本地文件（但在本地使用时有效）【英文标题】：Can\'twritelocalfilesinFlashPlayer10+online(butworkswhenusedlocally)【发布时间】：2012-02-0119:06:47【问题描述】：我正在尝试使用FileReference类使用FlashPlayer10+编写... 查看详情
我在 index.html 中指向 manifest.json 的链接在我运行反应脚本“yarn start”时有效，但在我运行“python3 manage.py runserver”时无效
】我在index.html中指向manifest.json的链接在我运行反应脚本“yarnstart”时有效，但在我运行“python3manage.pyrunserver”时无效【英文标题】：Mylinktomanifest.jsoninindex.htmlworkswhenIrunreactscript\'yarnstart\',butnotwhenIrun\'python3manage.pyrunserver\'【发布... 查看详情
通过触发器运行时计划作业失败，但在手动运行时有效
】通过触发器运行时计划作业失败，但在手动运行时有效【英文标题】：Scheduledjobfailswhenrunviatrigger,butworkswhenrunmanually【发布时间】：2019-07-1002:37:34【问题描述】：我有一个计划的作业来运行以下命令：copy\'C:\\Users\\tdjeilati\\Desktop... 查看详情
MySQL 查询在由 Phpmyadmin 应用时有效，但在通过 PHP 应用时无效？
】MySQL查询在由Phpmyadmin应用时有效，但在通过PHP应用时无效？【英文标题】：MySQLqueryworkswhenappliedbyPhpmyadmin,butnotwhenappliedthroughPHP?【发布时间】：2015-12-0103:19:35【问题描述】：我正在尝试通过PHP将触发器应用于现有表和列。执行PH... 查看详情
此 SQL 代码在 SMMS 中执行时有效，但在 .Net 中通过 ExecuteNonQuery() 调用时无效，为啥？
】此SQL代码在SMMS中执行时有效，但在.Net中通过ExecuteNonQuery()调用时无效，为啥？【英文标题】：ThisSQLcodeworkswhenbeingexecutedinSMMSbutnotwhencalledviaExecuteNonQuery()in.Netwhy?此SQL代码在SMMS中执行时有效，但在.Net中通过ExecuteNonQuery()调用时无... 查看详情
Excel UDF 在通过 sub 调用时有效，但在工作表中始终返回 0
】ExcelUDF在通过sub调用时有效，但在工作表中始终返回0【英文标题】：ExcelUDFworkswhencalledthroughsubbutalwaysreturns0inworksheet【发布时间】：2015-12-1501:42:03【问题描述】：我的函数在工作表中调用时总是返回0，但在通过子调用时返回正... 查看详情
PHP 需要“guzzle.phar”会引发致命错误，但在页面刷新时有效
】PHP需要“guzzle.phar”会引发致命错误，但在页面刷新时有效【英文标题】：PHPrequire\'guzzle.phar\'throwsFatalErrorbutonpagerefreshworks【发布时间】：2020-06-2711:16:48【问题描述】：我想在我的项目中使用Guzzle而不使用Composer（我无法避免的... 查看详情
装饰器仅在装饰方法时有效，但在使用作为参数传递的方法调用装饰器时无效
】装饰器仅在装饰方法时有效，但在使用作为参数传递的方法调用装饰器时无效【英文标题】：Decoratoronlyworkswhenmethodisdecoratedbutnotwhenthedecoratoriscalledwithmethodpassedasargument【发布时间】：2022-01-1920:12:40【问题描述】：长期聆听者；... 查看详情