Упрощать код javascript

Мне хотелось бы, что они помогли мне упрощать этот код с каким-то типом class. Правда состоит в том, что не знаю так, как делать для это, я сам. Я оставляю им пример другого simpflicación, с которым любезно они помогли мне в этом форуме, который является функцией класса, станьте близким другом.

Это код, который я хочу упростить:

var kk = false;
var t = false;
var XX = false;
var ff = false;

$(window).scroll(function() {
  var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
  if (scrollPercent >= 5 && variableXX == false) {
    variableXX = true;
    $(".onscroll5").fadeIn(0);
  } else if (scrollPercent < 5 && variableXX == true) {
    variableXX = false;
    $(".onscroll5").fadeIn(0);
  }
  if (scrollPercent >= 10 && t == false) {
    t = true;
    $(".onscroll10").fadeIn(0);
  } else if (scrollPercent < 10 && t == true) {
    t = false;
    $(".onscroll10").fadeIn(0);
  }
});

$(window).scroll(function() {
  var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
  if (scrollPercent >= 20 && kk == false) {
    kk = true;
    $(".outscroll20").fadeOut(0);
  } else if (scrollPercent < 20 && kk == true) {
    kk = false;
    $(".outscroll20").fadeOut(0);
  }
  if (scrollPercent >= 25 && ff == false) {
    ff = true;
    $(".outscroll25").fadeOut(0);
  } else if (scrollPercent < 25 && ff == true) {
    ff = false;
    $(".outscroll25").fadeOut(0);
  }
});

И для этого я хотел основаться на этом примере:

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

Я это пробую из-за моего счета и до настоящего времени это сделал, и хотя оно не функционирует, думаю, что выстрелы могли бы идти где-то здесь:

var variableXX = false;
$(window).scroll(function() {
  var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
  var porcentaje = parseInt($(this).attr("class").match(/inscroll\d+/g)[0].replace("onscroll",""));
  if (scrollPercent >= porcentaje && variableXX == false) {
    variableXX = true;
    $("[class*=onscroll]").fadeIn(0);
  } else if (scrollPercent < porcentaje && variableXX == true) {
    variableXX = false;
    $(".onscroll5").fadeIn(0);
  }
});
3
задан 03.04.2016, 04:49
1 ответ

Если то, что ты хочешь, состоит в том, чтобы делать это характерным для того, чтобы я функционировал не только с 5, 10, 20 и 25 но также с любой другой стоимостью, как в примере, который ты помещаешь (и что я сам имел в другом вопросе :P), вещь будут осложнять достаточно больше.

Эти функции более специфические, чем функции предыдущих случаев. Раньше только они зависели от числа, которое появлялось в классе, сейчас также они зависят от переменной, которая изменяет другой один класс (XX, t, kk и ff для onscroll5, onscroll10, onscroll20 и onscroll25 соответственно).

И кроме того, для каких-то классов он делается fadeIn и для других fadeOut, так, что не видимой связи между классом и функцией, которая должна работать в каждом случае. То, что он вынудит тебя, чтобы создавать структуру, чтобы сохранять все переменные (класс, процентное содержание, переменная и функция; хотя процентное содержание может быть полученным начиная с класса) и почти он создал бы больше комплексность той, которая есть.


Однажды сказанный это, да, что ты мог бы пробовать уменьшить код сочетая функции (драйверы scroll) и ifs (если ты обращаешь внимание, это тот же код в if и else if) для того, чтобы все было более коротким и легким для того, чтобы быть прочитанным:

var kk = false;
var t  = false;
var XX = false;
var ff = false;

// un único controlador del evento scroll
$(window).scroll(function() {

  // una única variable scrollPercent
  var scrollPercent = 100 * $(window).scrollTop() / DocHeight;

  // combina las dos condiciones en una sola porque las dos hacen lo mismo
  if ((scrollPercent >= 5 && XX == false) || (scrollPercent < 5 && XX == true) {
    XX = !XX;                  // cambia el valor de la variable
    $(".onscroll5").fadeIn(0); // esconde el elemento
  }

  if ((scrollPercent >= 10 && t == false) || (scrollPercent < 10 && t == true)) {
    t = !t;
    $(".onscroll10").fadeIn(0);
  }

  if ((scrollPercent >= 20 && kk == false) || (scrollPercent < 20 && kk == true)) {
    kk = !kk;
    $(".outscroll20").fadeOut(0);
  }

  if ((scrollPercent >= 25 && ff == false) || (scrollPercent < 25 && ff == true)) {
    ff = !ff;
    $(".outscroll25").fadeOut(0);
  }

});

Было бы возможно делать более коротко даже меняя вещи как variable == false из-за !variable, или variable == true просто из-за variable. И, может быть, было возможно уменьшать больше условие.

3
ответ дан 24.11.2019, 14:39
  • 1
    Хороший большое спасибо @alvaromontoro иногда один пробует делать слишком сложные вещи! jeje – Ivan Soler 03.04.2016, 17:11