Question

来自完整的JS noobie的快速提问。

在网站上，我有一个产品的图像，基本上由两部分组成，然后我有一排小的.png缩略图.colorthumbnail这些具有透明背景的独立部分。在CSS中我设置它，以便在悬停缩略图时，它使.colorzoom类使用position: absolute覆盖原始产品图片上相同颜色选项的大版本。

HTML：

<div class="coloroptions">
                <div class="j210desertsand">
                <div class="colorthumbnail">
                <a href="javascript:void(0)" id="colorpicker">
                <img src="img/products/colors/j210desertsand.png"></a>
                <span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
                </span></div></div>
                <div class="j210platinum">
                <div class="colorthumbnail">
                    <a href="javascript:void(0)" id="colorpicker">
                <img src="img/products/colors/j210platinum.png"></a>
                <span class="colorzoom"><img src="img/products/colors/j210platinum.png">
                </span></div></div>
</div>

<div class="j210desertsand">类就在那里，所以我可以使用CSS轻松隐藏单个颜色选项，下一个颜色将排成一行。经过一些研究后，我发现我确实应该点击缩略图并使用a href="javascript:void(0)"实际链接到任何地方或重新加载页面。

CSS :(请原谅我，我没经验）

.coloroptions {
    width: 60%;
    margin-left: 40%;
}

.colorthumbnail {
    margin-left: -45%;
}

.colorthumbnail img {
    float: left;
    max-width: 16%;
    padding-right: 5px;
    position: relative;
}


.colorthumbnail .colorzoom {
    position: absolute;
    width: 253%;
    margin-top: 6.9%;
    display: none;  
    margin-left: -3.6%;
}



.colorthumbnail:hover .colorzoom {
    display: block;
}

现在这似乎工作正常，但因为有两个不同的部分我想让用户能够组合颜色选项，显然你不能一次悬停在两个图像上。经过一些研究后，我发现我需要Javascript来强制点击:hover状态。但我说实话，我不知道我在做什么。这就是我所拥有的：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
   $('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->

然而，这似乎不起作用。我是否在<head>权限中获得了链接脚本？它确实适用于“Hello World＆＃39;弹出测试。我是否正确地获得了剧本中的课程？我有点卡住了，我将不胜感激！非常喜欢社区。

Answer 1

尝试添加以下代码：

$( document ).ready(function() {
  $("#colorpicker").click(function() {
    $('.colorthumbnail:hover')
     .toggleClass('colorthumbnail:hover.colorzoom');
  });
});

当尝试使用jquery时，您需要确保页面已加载，以便它可以执行dom操作。

来源：https://api.jquery.com/ready/

这是一个jsFiddle演示：https://jsfiddle.net/Lv571n1w/

如果你检查元素，你可以看到它在点击时切换类。

单击

1 个答案: