Question

嘿伙计们我试图创建一个函数并在每个循环中调用它。我让它工作，但每个循环都不起作用。所以我尝试添加一个额外的$(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事件。有关详细信息，请查看the documentation。我假设在你的例子中它可能是某种类型的slideLeft事件的触发器。只是一个想法。

Answer 2

你正在寻找这个吗？

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

function slideRight () {

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


});

它适用于我

jQuery创建函数并分别调用它们

2 个答案: