Question

我想使用按钮（存储在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>

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

为该类使用事件处理程序

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-每个按钮单击更改元素中的属性

2 个答案: