Onload нажмите на картинку с помощью jQuery - PullRequest
Новая
       28

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

0 голосов
/ 08 апреля 2019

У меня есть веб-сайт, на котором я пытаюсь автоматически нажимать на картинку с помощью 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 ]

1 голос
/ 08 апреля 2019

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

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

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

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

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

0 голосов
/ 08 апреля 2019

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

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