Блог

Главная - Вопросы по программированию - Как использовать несколько элементов в одном наборе кода для javascript

Как использовать несколько элементов в одном наборе кода для javascript

#javascript #html #jquery

Вопрос:

 $(document).ready(function() {
  $(".button1").click(function() {
    $("html, body").animate({
      scrollTop : $("#screen1").offset().top
    }, 800);
  });
})

$(document).ready(function() {
  $(".button2").click(function() {
    $("html, body").animate({
      scrollTop : $("#screen2").offset().top
    }, 800);
  });
})

...and so on

Я написал приведенный выше код на javascript. При нажатии кнопки она прокручивается в положение #на экране. Тем не менее, у меня есть несколько кнопок».»и «#экран», которые в основном выполняют одну и ту же функцию. Я не хочу повторять один и тот же код, поэтому я попытался сделать это в заявлении, но не смог сделать это правильно. Каким образом я могу избежать повторения кодов в этой ситуации?

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

1. Попробуйте использовать функцию each() .

Ответ №1:

Теперь я не могу видеть ваш HTML-код, но мое предложение состояло бы в том, чтобы добавить прослушиватель событий в родительский элемент для всех кнопок, а затем добавить информацию о кнопке на самой кнопке. Здесь я использую атрибут data-screen для хранения информации о «экране».

Обновить

Я немного доработал jquery. Используя on() вместо click() этого, чтобы я мог удалить исходное if утверждение. Когда прослушиватель событий находится на родительском элементе, можно динамически добавлять дополнительные кнопки, и они будут работать должным образом.

 $(document).ready(function() {
  $("#buttons").on("click", "button", function(e) {
    var screenid = $(e.target).attr('data-screen');
    $("html, body").animate({
      scrollTop: $(`#screen${screenid}`).offset().top;
    }, 800);
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttons">
  <button data-screen="1">Button 1</button>
  <button data-screen="2">Button 2</button>
  <button data-screen="3">Button 3</button>
</div>

<div>
  <div id="screen1"></div>
  <div id="screen2"></div>
  <div id="screen3"></div>
</div>

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

1. Мне нравится это решение. Я бы предложил использовать $("#buttons button") (вместо оператора if) в качестве слушателя и const screenid = $(this).attr('data-screen') получить идентификатор

2. @A_A спасибо за советы. Я не увлекаюсь jquery. Не это месиво лучше.

3. Вы можете использовать .data('screen') вместо .attr('data-screen') : api.jquery.com/data P.S. И $(this) вместо $(e.target) этого .

Ответ №2:

Предполагая , что все кнопки и экраны соответствуют соглашению .button${number} об именах, и #screen${number} вы можете сделать это:

 const numberOfSections = 5;

$(document).ready(function() {
  for (let i = 1; i <= numberOfSections ; i  ) {
    $(`.button${i}`).click(function() {
      $("html, body").animate({
        scrollTop : $(`#screen${i}`).offset().top
      }, 800);
    });
  }
});
Метки: