Question

我正在尝试使用jquery在我的Squarespace网站上添加指向多个图像的链接。但是，他们不共享一类，我不能使用Squarespace作为IM添加一个类，因此我只能添加自定义CSS或JavaScript。

因此，我尝试这样做的方法是选择具有类名称“ .ProductItem-gallery-slides-item”的父div，然后选择第二个也是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';
    });
  }

结果应该是可点击的图像。

希望我问这个权利，您好。亲切的问候

Answer 1

您的选择器不正确。使用

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

因为您要获得ProductItem-gallery-slides-item的第二个子div。

您的代码也缺少结尾)。
请注意：$().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中的图片设为点击链接

1 个答案: