Question

我想知道是否有人可以帮我缩小这个jquery脚本？现在，我在悬停时有ID，但如果需要，可以将其更改为类。

我确信必须有一些方法用“this”来做，而不是必须列出每一个。

以下是11个不同功能中的2个的示例。我希望有一些方法可以缩小它...就像我说的，如果我需要将id更改为Classes，那也没关系。

谢谢！特洛伊

<script>
$(document).ready(function(){

$("#gfo-1").hover(
function() {
$(".gfo-1-arrow").stop().animate({"opacity": "1"}, "slow");
},
function() {
$(".gfo-1-arrow").stop().animate({"opacity": "0"}, "slow");
});

$("#gfo-2").hover(
function() {
$(".gfo-2-arrow").stop().animate({"opacity": "1"}, "slow");
},
function() {
$(".gfo-2-arrow").stop().animate({"opacity": "0"}, "slow");
});

});
</script>

Answer 1

根本不更改HTML，您可以将其简化为：

$(function(){
  $("#gfo-1, #gfo-2").hover(function() {
    $("." + this.id + "-arrow").stop(true, true)
                               .animate({opacity: "toggle"}, "slow");
  });
});

如果您为#gfo-1和#gfo-2元素添加了一个类，那么您也可以将$("#gfo-1, #gfo-2")缩短为$(".thatClass")，使其可以根据需要进行操作。

Answer 2

由于回调非常相似，你可以做的一件事就是编写一个生成回调的函数。它使用闭包的概念。

<script>
$(document).ready(function(){

function makeCallback(id, opacity) {
 return (function() {
    $(id).stop().animate({"opacity": opacity}, "slow");
 });
}
$("#gfo-1").hover(makeCallback(".gfo-1-arrow", "1"),makeCallback(".gfo-1-arrow","0"));
$("#gfo-2").hover(makeCallback(".gfo-2-arrow", "1"),makeCallback(".gfo-2-arrow","0"));
});
</script>

Answer 3

是的，您应该使用课程。

所以在你设置gfo-1，gfo-2 ID的地方，添加一类说“gfo”。

<div class="gfo">etc</div>

然后在你的jQuery中，你可以使用类似的东西：

<script type="text/javascript">
$(document).ready(function(){
    var $arrow = $(".gfo-1-arrow"); // Store object for performance
    $(".gfo").hover(
    function() {
        $arrow.stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $arrow.stop().animate({"opacity": "0"}, "slow");
    });
});
</script>

根据您的要求，您也可以分别使用fadeIn（）和fadeOut。

<script type="text/javascript">
$(document).ready(function(){
    var $arrow = $(".gfo-1-arrow"); // Store object for performance
    $(".gfo").hover(
    function() {
        $arrow.stop().fadeIn("slow");
    },
    function() {
        $arrow.stop().fadeOut("slow");
    });
});
</script>

Answer 4

你可以做的缩短脚本的主要方法是用类或类似东西来编写函数

$(document).ready(function(){
$(".gfo").hover(
function() {
$("."+$(this).attr("id")+"-arrow").stop().animate({"opacity": "1"}, "slow");
},
function() {
$("."+$(this).attr("id")+"-arrow").stop().animate({"opacity": "0"}, "slow");
});
})

这样，您可以为所有受影响的元素编写一次函数。

我可以缩小这个jquery脚本吗？

4 个答案: