0

我是 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>
4

1 回答 1

1

将 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;
}

小提琴

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

于 2013-06-23T18:21:27.880 回答