Onload нажмите на картинку с помощью jQuery

У меня есть веб-сайт, на котором я пытаюсь автоматически нажимать на картинку с помощью jQuery при загрузке сайта. Я использую WordPress и код реализован в нижнем колонтитуле. Сайт https://mobimania.si/trgovina/ovitek-print-gold-mandala-copy/ а фактическая фотография находится в разделе "ИЗБЕР МОТИВ".

У меня есть код, но по какой-то причине он не работает

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>

Источник

2 ответа

Решение

Сначала нужно починить

<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>

Источник

У вас есть ошибки JavaScript на вашей странице, пожалуйста, исправьте их.

О вашей проблеме: ваш код не работает, потому что вы используете неправильный селектор, этот должен работать:

$("#mCSB_4 .fpd-grid .fpd-item > picture").trigger('click');

Обратите внимание на пробелы, у вас есть элемент с id="mCSB_4", который содержит элемент с классом "fpd-grid", который содержит, и элемент с классом "fpd-item", который имеет "дочерний рисунок".

Без пробелов вы ищете элемент с id="mCSB_4" и эти классы.

Источник
Другие вопросы по тегам