Упрощать код jquery повторенная функция

Есть какая-то манера упрощать эти 3 главные функции, повторенные так часто в 3 единственных функциях?

jQuery(function () {
var $els = $('pre[id^=pictureY5]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(0, function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn(0);
    })
}, 300)
})
jQuery(function () {
var $els = $('pre[id^=pictureX2]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(0, function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn(
   })
}, 200)
})
setInterval(function() {
    $('.outtime30').fadeOut(0);
}, 30000); 
setInterval(function() {
    $('.outtime34').fadeOut(0);
}, 34000);
setInterval(function() {
    $('.outtime40').fadeOut(0);
}, 40000);

$(function() {
  $(".intime2").delay(2000).fadeIn(0);
  $(".intime4").delay(4000).fadeIn(0);
  $(".intime5").delay(5000).fadeIn(0);
  $(".intime4").delay(4000).fadeIn(0);
  $(".intime5").delay(5000).fadeIn(0);
  $(".intime6").delay(6000).fadeIn(0);
  $(".intime8").delay(8000).fadeIn(0);
  $(".intime10").delay(10000).fadeIn(0);
  $(".intime12").delay(12000).fadeIn(0);
  $(".intime14").delay(14000).fadeIn(0);
  $(".intime15").delay(15000).fadeIn(0);
  $(".intime17").delay(17000).fadeIn(0);
  $(".intime20").delay(20000).fadeIn(0);
  $(".intime25").delay(25000).fadeIn(0);
  $(".intime27").delay(27000).fadeIn(0);
  $(".intime30").delay(30000).fadeIn(0);
  $(".intime35").delay(35000).fadeIn(0);
  $(".intime40").delay(40000).fadeIn(0);
  $(".intime45").delay(45000).fadeIn(0);
  $(".intime50").delay(50000).fadeIn(0);
  $(".intime55").delay(55000).fadeIn(0);
  $(".intime60").delay(60000).fadeIn(0);
  $(".intime70").delay(70000).fadeIn(0);
  $(".intime80").delay(80000).fadeIn(0);
  $(".intime90").delay(90000).fadeIn(0);
  $(".intime100").delay(100000).fadeIn(0);
  $(".intime110").delay(110000).fadeIn(0);
  $(".intime120").delay(120000).fadeIn(0);
  $(".intime140").delay(140000).fadeIn(0);
  $(".intime160").delay(160000).fadeIn(0);
  $(".intime180").delay(180000).fadeIn(0);
  $(".intime210").delay(210000).fadeIn(0);
  $(".intime240").delay(240000).fadeIn(0);
  $(".intime300").delay(300000).fadeIn(0);
});
    <div class="adin adsbg intime14 fixed top outtime34" style="right:0;">
    <pre id="pictureW2" class="fontcolor fontmid1">
    </pre>
    <pre id="pictureW22" class="fontcolor fontmid1">
    </pre>
      </div>
1
задан 01.04.2016, 04:34
1 ответ

Мы пойдем одна к одной, видя части, которые ты хочешь упростить:

1. Станьте близким другом

Я начинаюсь с этим, потому что он "проще" и больше. Это твой код:

$(function() {
  $(".intime2").delay(2000).fadeIn(0);
  $(".intime4").delay(4000).fadeIn(0);
  $(".intime5").delay(5000).fadeIn(0);
  $(".intime4").delay(4000).fadeIn(0);
  $(".intime5").delay(5000).fadeIn(0);
  $(".intime6").delay(6000).fadeIn(0);
  $(".intime8").delay(8000).fadeIn(0);
  $(".intime10").delay(10000).fadeIn(0);
  $(".intime12").delay(12000).fadeIn(0);
  $(".intime14").delay(14000).fadeIn(0);
  $(".intime15").delay(15000).fadeIn(0);
  $(".intime17").delay(17000).fadeIn(0);
  $(".intime20").delay(20000).fadeIn(0);
  $(".intime25").delay(25000).fadeIn(0);
  $(".intime27").delay(27000).fadeIn(0);
  $(".intime30").delay(30000).fadeIn(0);
  $(".intime35").delay(35000).fadeIn(0);
  $(".intime40").delay(40000).fadeIn(0);
  $(".intime45").delay(45000).fadeIn(0);
  $(".intime50").delay(50000).fadeIn(0);
  $(".intime55").delay(55000).fadeIn(0);
  $(".intime60").delay(60000).fadeIn(0);
  $(".intime70").delay(70000).fadeIn(0);
  $(".intime80").delay(80000).fadeIn(0);
  $(".intime90").delay(90000).fadeIn(0);
  $(".intime100").delay(100000).fadeIn(0);
  $(".intime110").delay(110000).fadeIn(0);
  $(".intime120").delay(120000).fadeIn(0);
  $(".intime140").delay(140000).fadeIn(0);
  $(".intime160").delay(160000).fadeIn(0);
  $(".intime180").delay(180000).fadeIn(0);
  $(".intime210").delay(210000).fadeIn(0);
  $(".intime240").delay(240000).fadeIn(0);
  $(".intime300").delay(300000).fadeIn(0);
});

Все классы .intimeX где X - число и delay он 1000 раз этого числа, тогда было бы возможно упрощать это так:

$(function() {
    // para todos los elementos que contengan intime en su clase
    $("[class*=intime]").each(function() {
        // usar expresiones regulares para obtener el número detras de intime
        var retraso = parseInt($(this).attr("class").match(/intime\d+/g)[0].replace("intime",""));
        // mostrar el elemento con el retraso adecuado
        $(this).delay(retraso * 1000).fadeIn(0);
    });
});

2. Outtime

outtimes будут функционировать способом, сходным в извести, только, который вместо того, чтобы искать из-за intime, мы будем искать outtime, и вместо того, чтобы делать fadeIn, он станет fadeOut.

Это твой код:

setInterval(function() {
    $('.outtime30').fadeOut(0);
}, 30000); 
setInterval(function() {
    $('.outtime34').fadeOut(0);
}, 34000);
setInterval(function() {
    $('.outtime40').fadeOut(0);
}, 40000);

Та же процедура: у всех есть класс outtimeX, где X - число и fadeOut осуществляется X секунд после (число * 1000). Мы применяем ту же процедуру:

$(function() {
    // para todos los elementos que contengan outtime en su clase
    $("[class*=outtime]").each(function() {
        // usar expresiones regulares para obtener el número detras de outtime
        var retraso = parseInt($(this).attr("class").match(/outtime\d+/g)[0].replace("outtime",""));
        // esconder el elemento usando el intervalo indicado
        setInterval("$('.outtime" + retraso + "').fadeOut(0)", retraso * 1000);
    });
});

3. pre

Эта часть сложнее, хотя также много. Я буду помещать здесь код, который у тебя есть, но буду форматировать это различным способом (помимо исправления пары cosillas):

jQuery(function () {
  var $els = $('pre[id^=pictureY5]'),
      i = 0,
      len = $els.length;

  $els.slice(1).hide();
  setInterval(function () {
    $els.eq(i).fadeOut(0, function () {
      i = (i + 1) % len
      $els.eq(i).fadeIn(0);
    })
  }, 300)
});
jQuery(function () {
  var $els = $('pre[id^=pictureX2]'),
      i = 0,
      len = $els.length;

  $els.slice(1).hide();
  setInterval(function () {
    $els.eq(i).fadeOut(0, function () {
      i = (i + 1) % len
      $els.eq(i).fadeIn(0)
    }, 200);
  });
});

Код сходный в обоих случаях, единственном, что изменяет один под другой звук: селекторы (в одном он pictureY5 и в другом он pictureX2) и времена (300 и 200 соответственно). Ты мог бы пробовать выбирать оба с jQuery (возможно делать отделяя селекторы с запятой), но это создало бы проблемы во время того, чтобы показывать / спрятаться элементы (потому что был бы единственный список вместо двух списков).

То, что он сделал бы, чтобы это решать создавать независимую функцию, в которую ты перемещал бы его как параметры две стоимость, которую они меняют. Тогда, когда загружается страница, делать два призыва к функции, одну для pictureY5 с 300 и другой для pictureX2 с 200.

Так ты мог бы делать что-то как это:

function mostrarEsconder(selector, tiempo) {
  var $els = $('pre[id^=' + selector + ']'),
      i = 0,
      len = $els.length;

  $els.slice(1).hide();
  setInterval(function () {
    $els.eq(i).fadeOut(0, function () {
      i = (i + 1) % len;
      $els.eq(i).fadeIn(0);
    })
  }, tiempo)
}

jQuery(function() {
    mostrarEsconder('pictureY5', 300);
    mostrarEsconder('pictureX2', 200);
});

Соединяя все, код оказался бы сведенным к нечто похожему:

function mostrarEsconder(selector, tiempo) {
  var $els = $('pre[id^=' + selector + ']'),
      i = 0,
      len = $els.length;

  $els.slice(1).hide();
  setInterval(function () {
    $els.eq(i).fadeOut(0, function () {
      i = (i + 1) % len;
      $els.eq(i).fadeIn(0);
    })
  }, tiempo)
}

$(function() {

    $("[class*=intime]").each(function() {
        var retraso = parseInt($(this).attr("class").match(/intime\d+/g)[0].replace("intime",""));
        $(this).delay(retraso * 1000).fadeIn(0);
    });

    $("[class*=outtime]").each(function() {
        var retraso = parseInt($(this).attr("class").match(/outtime\d+/g)[0].replace("outtime",""));
        setInterval("$('.outtime" + retraso + "').fadeOut(0)", retraso * 1000);
    });

    mostrarEsconder('pictureY5', 300);
    mostrarEsconder('pictureX2', 200);

});
3
ответ дан 24.11.2019, 14:40
  • 1
    ВПЕЧАТЛЯЮЩИЙ @alvaromontoro петля и # 225; он мог давать тебе м и # 225; s положительные точки!! – Ivan Soler 01.04.2016, 06:31
  • 2
    Вещь @alvaromontoro в Outtime есть ошибка, которую я не получаю desentra и # 241; ar с моими знаниями, которые он способствует тому, чтобы оно не функционировало (я думаю, что это ошибка написания) – Ivan Soler 01.04.2016, 07:21
  • 3
    @IvanSoler я бью козырем м и # 237; или. Hab и # 237; в факт копия - затруднение intime и забывают измениться себе " intime" из-за " outtime" в сайте. Уже я исправил неудачу и сейчас быть должным и # 237; чтобы функционировать хорошо – Alvaro Montoro♦ 01.04.2016, 07:25
  • 4
    S и # 237; @alvaromontoro конфирмант! Большой ответ. – Ivan Soler 01.04.2016, 07:34

Теги

Похожие вопросы