jQuery创建函数并分别在每个函数上调用

Question

大家好，我正在尝试创建一个函数，并在每个循环中的另一个函数中调用它。 我知道它可以工作，但是每个循环都无法工作。 因此，我尝试添加一个额外的$(this) ，但$(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进行编程。 这不会改变其初始呈现，因此不应使用代码来完成。

接下来，绑定一个自定义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（）使用第二个功能参数来绑定到mouseout事件。 查看文档以获取更多信息。 我认为在您的示例中，这可能是对slideLeft事件的某种触发。 但是只是一个想法。

Answer 2

您在找这个吗？

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

function slideRight () {

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


});

它对我有用