通过DOM操纵按钮，JavaScript

我正在尝试找到单击按钮的索引，以便我可以用相同的索引来操纵其他元素，但是我不知道如何！

html：

<body>
        <div id="area">
            <h1>JavaScript</h1>
            <button class="knapp">Click!</button>
            <p class="text">Adöfkljg ldjfögj jsdflkgjh kjddflkgjh dfgkjdöjg </p>
            <button class="knapp">Click!!</button>
            <p class="text">dfghödifgjöoeirugeöori dijfoidj oidoi odi!</p>
        </div>
        <script src="visa.js"></script>
    </body>

javaScript：

var text = document.getElementsByClassName("text");
var butt = document.getElementsByClassName("knapp");
window.onload = start();
function start(){
    for (i=0; i<text.length; i++){
        text[i].style.visibility = "hidden";
    };
};
this.onclick = function(){
    var index = butt.indexOf(this);
};

小提琴：http://jsfiddle.net/x9lgg/2/

<div id="area">
    <h1>JavaScript</h1>
    <button class="knapp">Click!</button>
    <p class="text">Adöfkljg ldjfögj jsdflkgjh kjddflkgjh dfgkjdöjg </p>
    <button class="knapp">Click!!</button>
    <p class="text">dfghödifgjöoeirugeöori dijfoidj oidoi odi!</p>
</div>

尝试此JavaScript，当单击某些按钮时，您将获得按钮的索引：

var button = document.getElementsByClassName("knapp");
var txt = document.getElementsByClassName("text");
for ( var i = 0; i < button.length; i++ ) (function(j){
    button[j].addEventListener("click",function(){
    console.log(j); // shows index
    if ( txt[j].style.visibility == "hidden" ) { // show hides p element depend on button index
        txt[j].style.visibility = "visible";
    } else {
        txt[j].style.visibility = "hidden";
    }
    },false);
})(i);

它将在单击第一个按钮时提醒0，第二个按钮时1，因此您可以用它来操纵其他元素（并且还隐藏了某些p元素）

jsfiddle

注意：在此处的脚本中， this.onclick... this关键字是指 window对象，以这种方式，您无法实现目标

我建议为此使用jQuery。jQuery具有内置的方法来获取索引。

相关内容

最新更新

热门标签：