質問: (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); }); ``` ``` ```
回答: Мы пойдем одна к одной, видя части, которые ты хочешь упростить: **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); }); ```