Js: jquery - Каждое нажатие кнопки меняет атрибут в элементе

Я хочу использовать кнопки (хранящиеся в кнопках var) для изменения различных атрибутов, таких как «href» внутри гиперссылки. Однако код работает, я бы хотел его немного сократить (возможно, используя цикл for?).

Все после 24 строки в js.

$(document).ready(function() {
  console.info("lauched\n");

  //vars
	var buttons = [];
  var hrefs = [];
  var imageextension = ".png";
  var aselector = $("#link");
  var time = 500;
  
  console.info("link storred:");
  console.info(aselector);
	
  //var assignment using for loop
  for (var i=0; i <= 2; ++i){
  buttons[i] = $("#akapit"+i);
  hrefs[i] = "img/logo" +i+ imageextension;
  //outputs
	console.info("Button storred:");
  console.info(buttons[i]);
  console.info("href storred:");
  console.info(hrefs[i]); 
  }
  
  // it works but how to short this? //
  
   buttons[0].click(function () {
     aselector.hide(0).fadeIn(time).attr("href", hrefs[0]);
   });
   buttons[1].click(function () {
     aselector.hide(0).fadeIn(time).attr("href", hrefs[1]);
   });
   buttons[2].click(function () {
     aselector.hide(0).fadeIn(time).attr("href", hrefs[2]);
   });
  
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>

    <body>

      <span>Run console to see outputs</span><br>

      <button id = "akapit0" class = "buttons">0</button>
      <button id = "akapit1" class = "buttons">1</button>
      <button id = "akapit2" class = "buttons">2</button>

      <a id = "link" href = "asdasdasd.com">LINK</a>

    </body>
  </head>

</html>

У вас серьезно есть тег тела внутри вашего тега? Я много чего видел, но это первый XD

— 10.01.2019 11:19

Извините, я поместил тело в тег заголовка. Торопился. Спасибо за ваши ответы.

— 10.01.2019 11:26

javascript jquery html attr

10.01.2019 11:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я заменил ваш дубликат на цикл for.

$(document).ready(function() {
  console.info("lauched\n");

  //vars
	var buttons = [];
  var hrefs = [];
  var imageextension = ".png";
  var aselector = $("#link");
  var time = 500;
  
  console.info("link storred:");
  console.info(aselector);
	
  //var assignment using for loop
  for (var i=0; i <= 2; ++i){
  buttons[i] = $("#akapit"+i);
  hrefs[i] = "img/logo" +i+ imageextension;
  //outputs
	console.info("Button storred:");
  console.info(buttons[i]);
  console.info("href storred:");
  console.info(hrefs[i]); 
  }
  
  // it works but how to short this? //
   for (let i = 0; i < 3; ++i){
    buttons[i].click(() => {
     aselector.hide(0).fadeIn(time).attr("href", hrefs[i]);
    });
   }
  
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>

    <body>

      <span>Run console to see outputs</span><br>

      <button id = "akapit0" class = "buttons">0</button>
      <button id = "akapit1" class = "buttons">1</button>
      <button id = "akapit2" class = "buttons">2</button>

      <a id = "link" href = "asdasdasd.com">LINK</a>

    </body>
  </head>

</html>

10.01.2019 11:21

Используйте обработчик событий для класса

var imageextension = ".png", time = 500;

$(function() {

  var $link = $("#link");

  $(".buttons").on("click", function(e) {
    e.preventDefault(); // or have type = "button"
    var idx = parseInt($(this).text());
    var href = "img/logo" + idx + imageextension;
    $link.hide().fadeIn(time).attr("href", href);
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Hover link to see the change</span><br>

<button id = "akapit0" class = "buttons">0</button>
<button id = "akapit1" class = "buttons">1</button>
<button id = "akapit2" class = "buttons">2</button>

<a id = "link" href = "asdasdasd.com">LINK</a>

10.01.2019 11:27

Другие вопросы по теме

Как отправить файл большого размера, то есть более 1 МБ, через запрос AJAX POST?

Значок не загружается должным образом в начальной загрузке

Как разбить предложение, нажав на пробел

Обновляет ли интервал jQuery, перезагружает ли div отдельно для каждого пользователя, открытого на этой странице?

CSS Scale и Transform вызывают перекрытия

Как добавить элемент в форму и загрузить его в диалоговое окно с помощью jQuery

Все значения из последнего цикла FOR после выполнения FOR

Как проверить, что ВЫБРАННАЯ опция НЕ ОПРЕДЕЛЕНА или НЕ в JQuery?

Событие щелчка не срабатывает в первый раз для динамически добавленных элементов через AJAX

Попытка отключить сортируемый элемент

Js: jquery - Каждое нажатие кнопки меняет атрибут в элементе

Ответы 2

Другие вопросы по теме

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