js: jquery - каждое нажатие кнопки меняет attr в элементе - PullRequest
Новая
       30

js: jquery - каждое нажатие кнопки меняет attr в элементе

0 голосов
/ 10 января 2019

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

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

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

  //vars
	var buttons = [];
  var hrefs = [];
  var imageextension = ".png";
  var aselector = $("#link");
  var time = 500;
  
  console.log("link storred:");
  console.log(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.log("Button storred:");
  console.log(buttons[i]);
  console.log("href storred:");
  console.log(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>

Ответы [ 2 ]

0 голосов
/ 10 января 2019

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

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>
0 голосов
/ 10 января 2019

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

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

  //vars
	var buttons = [];
  var hrefs = [];
  var imageextension = ".png";
  var aselector = $("#link");
  var time = 500;
  
  console.log("link storred:");
  console.log(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.log("Button storred:");
  console.log(buttons[i]);
  console.log("href storred:");
  console.log(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>
...