Блог

Главная - Вопросы по программированию - jQuery: функция преобразования вложенных букв

jQuery: функция преобразования вложенных букв

#javascript #jquery

#javascript #jquery

Вопрос:

Это код:

 $(document).ready(function() {
  var isRandom = false;
  $('#one, #two').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>'   chars.join('</span><span>')   '</span>';
  });
  $('#one').click(function() {
    isRandom = !isRandom;
    if (isRandom) {
      $('span').each(function() {
        $(this).css({
          "position": "absolute"
        });
        $(this).animate({
          left: Math.random() * window.outerWidth / 2,
          top: Math.random() * window.outerHeight / 2,
        });
      });
    } else {
      $('span').each(function() {
        $(this).css({
          "position": "relative"
        });
        $(this).animate({
          left: 0,
          top: 0,
        });
      });
    }
  });
}); 
 html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 20px;
  text-transform: uppercase;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>

Если вы нажмете первое div , буквы из #one и #two начнут двигаться. Именно так это и должно выглядеть. Но тогда: если вы хотите получить предыдущее состояние, вам нужно будет щелкнуть букву из #once . Это также должно сработать, если вы нажмете один из двух других div .

Как это возможно сделать? Был бы рад, если бы кто-нибудь мог мне помочь!

Комментарии:

1. Может $('#one').click( быть, может быть $('#one #two').click(

2. Снова установите значение left и top равным 0.

Ответ №1:

Вы можете добавить click событие #two , чтобы сделать это, как показано ниже —

 $('#two').click(function() {
if (isRandom) {
  isRandom = false;
  $('span').each(function() {
    $(this).css({
      "position": "relative"
    });
    $(this).animate({
      left: 0,
      top: 0,
    });
  });
}
});

Окончательный код (я извлек его в функции для лучшего понимания) —

 $(document).ready(function() {
  var isRandom = false;
  $('#one, #two').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>'   chars.join('</span><span>')   '</span>';
  });

  $('#one').click(function() {
    isRandom = !isRandom;
    if (isRandom) {
      fly();
    } else {
      restore();
    }
  });

  $('#two').click(function() {
    if (isRandom) {
      isRandom = false;
      restore();
    }
  });

  function fly() {
    $('span').each(function() {
      $(this).css({
        "position": "absolute"
      });
      $(this).animate({
        left: Math.random() * window.outerWidth / 2,
        top: Math.random() * window.outerHeight / 2,
      });
    });
  }

  function restore() {
    $('span').each(function() {
      $(this).css({
        "position": "relative"
      });
      $(this).animate({
        left: 0,
        top: 0,
      });
    });
  }
}); 
 html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 20px;
  text-transform: uppercase;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>

Ответ №2:

Вы можете просто изменить свой селектор на некоторый класс, который одинаков для всех divs, тогда внутри обработчика событий вам просто нужно проверить, имеет ли div, на который нажимается id one amp;amp; , если да, то if будет выполнена только часть.

Демонстрационный код :

 $(document).ready(function() {
  var isRandom = false;
  $('#one, #two').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>'   chars.join('</span><span>')   '</span>';
  });
  //chnage slector
  $('div.sameclass').click(function() {
    isRandom = !isRandom;
    //check if the div which is clicked has id one..
    if (isRandom amp;amp; $(this).attr("id") == "one") {
      $('span').each(function() {
        $(this).css({
          "position": "absolute"
        });
        $(this).animate({
          left: Math.random() * window.outerWidth / 2,
          top: Math.random() * window.outerHeight / 2,
        });
      });
    } else {
      $('span').each(function() {
        $(this).css({
          "position": "relative"
        });
        $(this).animate({
          left: 0,
          top: 0,
        });
      });
    }
  });
}); 
 html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 20px;
  text-transform: uppercase;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="one" class="sameclass">Click me</div>
<div id="two" class="sameclass">Flying letters based on #one</div>
<div class="sameclass">No flying letters</div>