Могу ли я уменьшить этот скрипт jquery вниз?

Question

Мне было интересно, может ли кто-нибудь помочь мне немного уменьшить этот скрипт jquery?Прямо сейчас у меня есть идентификатор при наведении, но при необходимости его можно изменить на класс.

Я уверен, что должен быть какой-то способ сделать это с помощью «this» вместо того, чтобы перечислять каждыйи каждый вниз.

Ниже приведен пример с 2 из 11 различных функций.Я надеюсь, что есть какой-то способ уменьшить это ... как я уже сказал, если мне нужно изменить идентификатор на классы, это тоже хорошо.

Спасибо!Трой

<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

Главное, что вы можете сделать, чтобы сократить сценарий, - написать функцию более обобщенно с помощью класса или чего-то подобного

$(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");
});
})

Таким образом, вы можете написать функцию один раз для всех задействованных элементов.

Answer 4

Да, вам, вероятно, следует использовать класс.

Поэтому, где вы устанавливаете свои идентификаторы gfo-1, gfo-2, добавьте класс, скажем "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>