javascript - jQuery 创建函数并分别调用它

Question

大家好，我正在尝试创建一个函数并在另一个 each 循环中调用它。我让它工作，但每个循环都不起作用。所以我尝试添加一个额外的 $(this) 但它也没有用......感谢任何帮助。

.moveClass {
position:relative;
}

$(function() {

$('.a_projectLoad').each(function(evt){
    $(this).hover(function(){
        $(this).slideRight();
    });
});

});

function slideRight () {
    $('.img_rightArrow')
        .addClass('moveClass')
        .animate({"left": "+=50px"}, "fast");
}

<table>
             <tr>
                <td><a href="#" class="a_projectLoad">Title Goes Here</a></td>
                <td ><img src="images/btn_loadProject.png" class="img_rightArrow"/></td>
              </tr>
              <tr>
                <td><a href="#" class="a_projectLoad">Title Goes Here</a></td>
                <td><img src="images/btn_loadProject.png" class="img_rightArrow"/></td>
              </tr>
</table>

Answer 1

将 position: relative 属性作为标记的一部分直接添加到您的图像，而不是通过 JavaScript 以编程方式添加。这不会改变其初始呈现，因此不应在代码中完成。

接下来，绑定(bind)一个自定义的 slideRight 事件并在悬停时调用它，如下所示:

$(function() {

    // Bind a custom slideRight event to each image
    $('img.img_rightArrow').bind({
        slideRight: function () {
            $(this).stop(true, true).animate({"left": "+=50px"}, "fast");
        },
        slideLeft: function () {
            $(this).stop(true, true).animate({"left": "-=50px"}, "fast");
        }
    });

    $('a.a_projectLoad').hover(function () {
        // Traverse DOM to find nearby arrow image
        $(this).closest("tr").find("img.img_rightArrow").trigger("slideRight");
    }, function () {
        $(this).closest("tr").find("img.img_rightArrow").trigger("slideLeft");
    });

});

仅供引用:您的图片缺少示例标记中的 img_rightArrow 类。

您可能会使用第二个功能参数来 .hover()绑定(bind)到 mouseout 事件。查看the documentation了解更多信息。我假设在您的示例中，它可能是某种触发 slideLeft 事件的东西。然而只是一个想法。