使 nth-child div 中的图像成为点击率 link

Question

我正在尝试使用 jquery 向我的 squarespace 网站上的多个图像添加 link。但是他们不共享 class，而且我无法使用 squarespace 添加一个，所以我只能添加自定义 css 或 javascript。

所以我尝试这样做的方法是选择具有 class 名称“.ProductItem-gallery-slides-item”的父项 div，然后选择它的第二个子项，这也是a div 然后是里面的图片。一旦我选择了正确的元素，我就添加了一个点击功能，该功能应该 link 到包含有关图像的更多信息的页面。我已经尝试过使用 .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';
    });
  }

结果应该是一张可点击的图片。

希望我问的是对的，非常感谢。亲切的问候

Answer 1

您的选择器不正确。使用

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

因为你想获得ProductItem-gallery-slides-item的第二个childdiv。

此外，您的代码缺少结尾 )。
附带说明：$().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>

使 nth-child div 中的图像成为点击率 link

Make the image in nth-child div a clickthrough link

javascript

jquery

html

squarespace