我有一个网站,我试图在加载网站时使用jQuery自动点击图片。我正在使用wordpress,代码是在页脚中实现的。该网站 https://mobimania.si/trgovina/ovitek-print-gold-mandala-copy/,实际图片在"IZBERI MOTIV"部分。
我有代码,但由于某种原因它不起作用
jQuery("document").ready(function($) {
setTimeout(function() {
$("#mCSB_4.fpd-grid.fpd-item>picture").trigger('click');
}, 10);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="mCSB_4" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
<div id="mCSB_4_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
<div class="fpd-grid fpd-grid-contain fpd-padding">
<div class="fpd-item fpd-hidden" data-title="252105" data-source="/wp-content/uploads/2019/02/252105-e1551204819312.jpg" data-search="252105">
<picture data-img="/wp-content/uploads/2019/02/252105-e1551204819312-188x300.jpg"></picture>
</div>
</div>
</div>
</div>
您的页面上有一些 JavaScript 错误,请修复它们。
关于你的问题:你的代码不起作用,因为你使用了错误的选择器,这个应该工作:
$("#mCSB_4 .fpd-grid .fpd-item > picture").trigger('click');
请注意空格,您有一个 id="mCSB_4" 的元素,其中包含一个具有类 "fpd-grid" 的元素,其中包含具有"图片子项"的类 "fpd-item" 的元素。
如果没有空格,您将搜索 id="mCSB_4" 的元素和这些类。
你首先需要修复
<script>jQuery function() {
我建议
$(function() {
setTimeout(function() {
$("#mCSB_4").find("picture").trigger('click');
},10);
});
您的选择器是错误的。您正在尝试单击具有 id=mCSB_4 并且两个.fpd-grid.fpd-item
类的直接子级
这些都将起作用:
$("#mCSB_4").find("picture").trigger('click');
$("#mCSB_4 > .mCSB_container > .fpd-grid>.fpd-item > picture").trigger('click');
直系后代和$("#mCSB_4 .mCSB_container .fpd-grid .fpd-item > picture").trigger('click');
仅使用带空格的类
注意 这是假设该图片上有一个单击处理程序。
jQuery("document").ready(function($) {
$("picture").on("click",function() {
console.log("clicked")
})
setTimeout(function() {
console.log("trying to click")
$("#mCSB_4").find("picture").trigger('click');
}, 10);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="mCSB_4" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
<div id="mCSB_4_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
<div class="fpd-grid fpd-grid-contain fpd-padding">
<div class="fpd-item fpd-hidden" data-title="252105" data-source="/wp-content/uploads/2019/02/252105-e1551204819312.jpg" data-search="252105">
<picture data-img="/wp-content/uploads/2019/02/252105-e1551204819312-188x300.jpg"></picture>
</div>
</div>
</div>
</div>