Question

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

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/

Answer 1

<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对象，以这种方式无法实现目标

Answer 2

我建议使用jquery。 JQuery有内置的方法来获取索引。

通过DOM，JavaScript操作按钮

2 个答案: