Question

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

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

FIDDLE

更好的方法是不使用内联JS，而是使用正确的事件处理程序。

Javascript for循环控制按钮单击状态

1 个答案: