Сделайте изображение в nth-child div ссылкой перехода по клику - PullRequest
Новая
       24

Сделайте изображение в nth-child div ссылкой перехода по клику

0 голосов
/ 14 мая 2019

Я пытаюсь добавить ссылку на несколько изображений на моем сайте с помощью jquery. Однако они не разделяют класс, и я не могу добавить его, так как я использую squarespace, поэтому я могу добавить только пользовательские CSS или JavaScript.

Таким образом, я пытаюсь сделать это, выбрав родительский div с именем класса ".ProductItem-gallery-slides-item", а затем его второй дочерний элемент, который также является div, и затем изображение внутри него. После того, как я выбрал правильный элемент, я добавляю функцию щелчка, которая должна ссылаться на страницу с дополнительной информацией об изображении. Я уже пробовал другой способ, используя .warp (), но я очень плохо знаком с jquery, я не совсем понял и не сработал.

Иерархия HTML: 

<div class="ProductItem-gallery-slides-item">
  <div>
    <img 1>
  </div>
  <div>
    <img 2>
  </div>
</div>

Мой JavaScript: 

$(document).ready(function() {
    $(".ProductItem-gallery-slides-item:nth-child(2)").children('img').click(function(){
      window.location = 'https://uk5-shop.com/paris-pink';
    });
  }

Результатом должно быть изображение, на которое можно кликнуть.

Надеюсь, я спросил это право, любой привет очень ценится. С уважением

1 Ответ

1 голос
/ 14 мая 2019

Ваш селектор неверен.Используйте 

$(".ProductItem-gallery-slides-item > div:nth-child(2) > img").on("click", ...

Так как вы хотите получить второй дочерний элемент ProductItem-gallery-slides-item.

Также в вашем коде отсутствует закрывающая ).
И примечание: $().click(...) устарело.Вместо этого используйте $().on("click", ...) (см. Код ниже).

Демонстрация: 

$(document).ready(function(){
    $(".ProductItem-gallery-slides-item > div:nth-child(2) > img").on("click", function(){
        // window.location = 'https://uk5-shop.com/paris-pink';
        // console.log for demo
        console.log("Second image clicked!");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ProductItem-gallery-slides-item">
    <div>
        <img src="https://via.placeholder.com/140x100.png">
    </div>
    <div>
        <img src="https://via.placeholder.com/140x100.png">
    </div>
</div>
...