gpt4 book ai didi

javascript - js : jquery - Each button click change attr in element

转载 作者:行者123 更新时间:2023-11-28 02:25:45 26 4
gpt4 key购买 nike

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

最佳答案

我将你的副本更改为 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>

关于javascript - js : jquery - Each button click change attr in element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54126439/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com