js: jquery - 每个按钮点击更改元素中的属性

Question

我想使用按钮（存储在 var buttons 中）来更改各种属性，例如超链接内的 "href"。但是代码有效，我想缩短一点（也许通过使用 "for" 循环？）。

js 中 24 行之后的所有内容。

$(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>

Answer 1

我把你的副本改成了 for 循环。

$(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>

Answer 2

为 class

使用事件处理程序

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>

js: jquery - 每个按钮点击更改元素中的属性

js: jquery - Each button click change attr in element

html

javascript

jquery

attr