Question

我是jQuery的新手，并学习如何让它与我的实际代码进行交互，以便页面更具交互性，但我对所有功能感到困惑。我理解jQuery的原理，我觉得很容易但是，我真的不知道如何调用函数。现在我正在测试页面上练习并习惯它。

我试图完成我在购物网站上看到的两件事。

第一件事： 鼠标悬停在像example

这样的图像上

就像你可以看到的，当光标悬停在图像上时，＆＃34;快速查看＆＃34;出现。这是我尝试做的第一件事。

第二件事： 单击图像时会显示一个包含更多详细信息和信息的框，当关闭＆＃34;关闭时，框会消失。被选中（请使用上一个链接示例来查看我试图完成的效果）。

为了测试我的技能，我已经开始使用 test 代码来尝试完成我想要的。

＆＃13;

< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > < /script>
<script>

$( img ).mouseenter( handlerIn ).mouseleave( handlerOut );


</script >

＆＃13;

.img {
  background-color: #f6f6f6;
  width: 241px;
  height: 341px;
}

＆＃13;

<body>
  <div class="img">an image
    <div>
</body>

＆＃13;

我知道这与$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );有关，这是我尝试做的第一件事。

我知道的第二件事与.toggle()

有关

和我们好，我是一个新手，刚刚开始弄清楚如何开始使用jQuery。

非常感谢！

Answer 1

您可以使用hover功能：$( selector ).hover( handlerIn, handlerOut )请参阅：http://api.jquery.com/hover/

  // You want this code to run after the document has been loaded
  jQuery(document).ready(function() {
        // Use .img to target all elements with the class 'img'
        $('.img').hover(function() {
            // This function is called when the mouse hovers over the element
            // Because this is function is an eventListener that is attached
            // to an element, you can call 'this' to target the element
            // that is being hovered over
            var image = jQuery(this);

            // Use the .append() function to insert content into an element
            image.append("<div class='quick-view'>Quick view</div>")
        },
        function() {
            // This function is called when the mouse leaves the element
            // In here we want to remove the quick-view element, so
            // first we have to find it. Again, use 'this' to
            // target the element that is hovered over.
            var image = jQuery(this);

            // Use the .find() function to look for the quick-view element
            // inside the element with the .img class:
            var quick-view = image.find('.quick-view');

            // Now to remove the quick-view element, use .remove()
            quick-view.remove();
        });
    });

下面的代码会将onClick侦听器附加到快速视图元素，以便您可以告诉脚本在单击快速视图元素时要执行的操作。
注意我们没有使用

 jQuery('.quick-view').click(function() {});

这是因为这会将点击功能附加到所有元素上并使用＆＃39;快速查看＆＃39;在加载文档后的类。但是在加载文档之后，没有任何元素具有快速查看＆＃39;类。这些元素是动态创建的。因此我们必须使用一个特殊的jQuery函数，即.on（）函数，我们将它们附加到body元素。见http://api.jquery.com/on/

jQuery('body').on('click', '.quick-view', function() {
    // Even though the listerner seems to be attached to the body
    // you can still call 'this' to target the quick-view element.
    // In here you can add the box with more details to the body
    jQuery('body').append("<div class='more-info'>more info</div>")
});

close元素的功能可以用大致相同的方式实现（对于在加载时没有创建但是动态创建的元素，总是使用.on（）。

如何使用jQuery使网站更具动态性？

1 个答案: