Question

客户希望将鼠标悬停在网站上的某些图片上。我查看了documentation on Pinterest's site并且只能找到如何将所有图像设置为pinit，并可选择使用CSS类关闭一些图像。但这意味着网站上95％的图片都必须有一个nopin类。

有没有办法可以将类应用于＆＃34; pinthis＆＃34;所以他们只有附加的pinit按钮。我注意到你可以在Wordpress上做这样的事情，但这是一个自定义构建的网站。

提前致谢！

编辑：

这是我在头文件中添加的代码，如上面的Pinterest开发人员链接中所述：

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>

这基本上设置页面上的所有图像都有pinit按钮，但是我需要它们才能应用于具有特定类的图像

Answer 1

因此，在jQuery中执行此操作的一种方法是默认情况下将所有图像设置为具有以下属性：

data-pin-no-hover="true"

jQuery for this就是：

 $("img").attr("data-pin-no-hover", true);

然后在下面你可以有一个额外的行，将你想删除属性的特定类的值改为false：

$(".pinit_img").removeAttr("data-pin-no-hover");

Answer 2

很抱歉回答我自己的问题，但这就是我克服这个问题的方法。我刚刚写了一些JavaScript，用类＆＃34; pinthis＆＃34;来查找图像。并应用属性nopin =＆＃34; true＆＃34;其他一切。

我还没有打破这个答案，因为可能有一种正式的方式可以做到这一点，而无需申请nopin =＆＃34; true＆＃34;对一切......但它似乎越来越不可能。

就个人而言，这对Pinterest来说有点令人失望，因为当然你应该只告诉你想要拥有的物品，而不是浪费时间迭代所有不想要的物品它。这对我来说似乎是浪费的标记。

无论如何，我就是这样做的：

<script type="text/javascript">
    $(document).ready(function(){
        $("img").each(function(){
            if(!$(this).hasClass("pinthis")){
                $(this).attr("nopin", "true");
            }
        });
    });
</script>

Answer 3

使用jQuery的另一种解决方案：

$('img').filter(function() {
  if ($(this).closest('.main-image').length === 0) {
    $(this).attr('data-pin-no-hover', true);
  }
});

仅在具有指定类的图像上显示Pinterest悬停按钮

3 个答案: