用于控制按钮点击状态的循环的Javascript

Javascript for-loop to control button click states

本文关键字：循环 Javascript 状态 控制 按钮 用于      更新时间：2023-09-26

我是JavaScript的新手，但从ActionScript开始，所以我使用了很多AS3逻辑，不确定什么是可能的，什么是不可能的。

我有一系列的5点为图像滑块导航。这些点只是CSS样式的点，所以我正在尝试制作它，这样我就可以使用element.style.backgroundColor.控制颜色

这是我的脚本：

function btnFeatured(thisBtn) {
    btnFeatured_reset();
    for (i = 1; i <= 5; i++) {
        if (thisBtn === document.getElementById("dotFeat" + i)) {
            document.getElementById("dotFeat" + i).style.backgroundColor = "#ffae00";
        }
    }
}
function btnFeatured_reset() {
    for (i = 1; i <= 5; i++) {
        document.getElementById("dotFeat" + i).style.backgroundColor = "#969696";
    }
}

看起来工作得很好，但当我点击这个点时，它会变成橙色（ffae00），然后立即变回灰色（969696）。

以防万一，这是我用来点的样式：

#featured-nav a {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #969696;
    border-bottom: none;
    margin: 0 14px;
}
#featured-nav a:hover {
    background-color: #ffae00;
    border-bottom: none;
}

还有我的html:

<a href='' onClick="btnFeatured(dotFeat1);" id="dotFeat1"></a>
<a href='' onClick="btnFeatured(dotFeat2);" id="dotFeat2"></a>
<a href='' onClick="btnFeatured(dotFeat3);" id="dotFeat3"></a>
<a href='' onClick="btnFeatured(dotFeat4);" id="dotFeat4"></a>
<a href='' onClick="btnFeatured(dotFeat5);" id="dotFeat5"></a>

将HTML更改为

<a href='#' onClick="btnFeatured(this);" id="dotFeat1">test</a>
<a href='#' onClick="btnFeatured(this);" id="dotFeat2">test</a>
<a href='#' onClick="btnFeatured(this);" id="dotFeat3">test</a>
<a href='#' onClick="btnFeatured(this);" id="dotFeat4">test</a>
<a href='#' onClick="btnFeatured(this);" id="dotFeat5">test</a>

和JS:

function btnFeatured(thisBtn) {
    for (i = 1; i <= 5; i++) {
       var state = parseInt(thisBtn.id.slice(-1),10) == i,
           elem  = document.getElementById("dotFeat" + i);
       elem.style.backgroundColor = (state ? "#ffae00" : "#969696");
    }
    return false;
}

FIDDLE

最好不要使用内联JS，而是使用适当的事件处理程序。

相关文章：