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

【问题标题】：js: jquery - Each button click change attr in elementjs: jquery - 每个按钮单击更改元素中的属性
【发布时间】：2019-01-10 10:18:03
【问题描述】：

我想使用按钮（存储在 var 按钮中）来更改超链接内的各种属性，例如“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>

【问题讨论】：

你的 head 标签里面真的有 body 标签吗？我见过很多东西，但这是第一次XD
对不起，我把 body 放在了 head 标签里面。很着急。感谢您的回答。

标签： javascript jquery html attr

【解决方案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>

【讨论】：

【解决方案2】：

为类使用事件处理程序

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>

【讨论】：