特定按钮触发特定项目的功能（JavaScript）答案

【问题标题】：Specific button to trigger function on specific item (JavaScript)特定按钮触发特定项目的功能（JavaScript）
【发布时间】：2018-01-20 13:25:04
【问题描述】：

我知道有更好的方法可以做到这一点，但为了学习目的，请帮助我。我有一个带有多个按钮和多个列表的 HTML。我希望每个按钮在单击时隐藏/显示其下方的列表。我想了解如何在 JavaScript 中执行此操作。这是我到目前为止的代码。无法发布完整的 HTML，因为它包含私人信息，但它看起来像这样。

<div id="conf" class="article">
<button>Education</button>

    <ul>
        <LI>2Sofic Groups a IMAR
        <LI>2Theory and Operator Algebra
        <LI>2 Geometric Group Theory
        <LI> 4th annual meeting
        <LI>2007: Co-organizer of 
    </ul>
</div>
<div id="conf" class="article">
<button>Education</button>

    <ul>
        <LI>2Sofic Groups a IMAR
        <LI>2Theory and Operator Algebra
        <LI>2 Geometric Group Theory
        <LI> 4th annual meeting
        <LI>2007: Co-organizer of 
    </ul>
</div>
<script>
var clickerbutton = document.getElementsByTagName("button");
var listEl = document.getElementsByTagName("ul");

//function to be run when event listener is fired
var onButtonClick = function() {
    listEl[i].classList.toggle("hide");
}

//event listener
for (i = 0; i < clickerbutton.lenght; i++){
    clickerbutton[i].addEventListener("click", onButtonClick);
}
</script>

感谢您的帮助和解释。

【问题讨论】：

标签： javascript list button onclick

【解决方案1】：

您必须在回调函数引用中绑定函数参数。注意bind函数的第一个参数设置了“onButtonClick”函数的“this”参数（没有用到）。

var onButtonClick = function(index) {
    listEl[index].classList.toggle("hide")
}

for (i = 0; i < clickerbutton.length; i++){
    clickerbutton[i].addEventListener("click", onButtonClick.bind(null, i));
}

【讨论】：

【解决方案2】：

您可以根据样式属性“none”和“block”显示/隐藏元素

var clickerbutton = document.getElementsByTagName("button");
    var listEl = document.getElementsByTagName("ul");

    function findArrayIndex(arr,val)
    {
        for(var cnt=0;cnt<arr.length;++cnt)
        {
            if(arr[cnt] === val)
                return cnt;
        }

        return -1;
    }

    var onButtonClick = function(e,ar) 
    {
        var index = findArrayIndex(clickerbutton,this);
        if(index !== -1 && listEl.length>index)
        {
            if(listEl[index].style.display ==='none')
            {
                listEl[index].style.display = 'block';
            }
            else
            {
                listEl[index].style.display = 'none';
            }
        }
    }
        //event listener
    for (var i = 0; i <clickerbutton.length; i++)
    {
        clickerbutton[i].addEventListener("click", onButtonClick);
    }

【讨论】：

谢谢！您的代码就像魔术一样工作！现在帮我揭开它的神秘面纱！我知道 findArrayIndex 函数返回 -1 或已单击按钮的索引。但我不明白怎么做。 arr 和 val 的参数是什么？
@AdrianPuşcuţă：arr 是任何数组，您希望从中找到“val”的索引作为值。所以假设如果你的数组是这样的：var myArr = [1,2,3]，并且你想找到值为 3 的索引，你应该调用 findArrayIndex(myArr,3)，它应该返回 2 作为索引。
我觉得，正如其他 cmets 所指出的，bind 方法更好，我写了那个冗长的代码，只是为了确保初学者能够理解。

【解决方案3】：

您必须使用.bind，就像@mfranchi 提到的那样

    var clickerbutton = document.getElementsByTagName("button");
    var listEl = document.getElementsByTagName("ul");
    var onButtonClick = function(index) {
        listEl[index].classList.toggle("hide")
    }
    
    for (i = 0; i < clickerbutton.length; i++){
        clickerbutton[i].addEventListener("click", onButtonClick.bind(null, i));
    }

.hide{
visibility: hidden;
}

<div id="conf" class="article">
    <button>Education</button>
    
        <ul>
            <LI>2Sofic Groups a IMAR
            <LI>2Theory and Operator Algebra
            <LI>2 Geometric Group Theory
            <LI> 4th annual meeting
            <LI>2007: Co-organizer of 
        </ul>
    </div>
    <div id="conf" class="article">
    <button>Education</button>
    
        <ul>
            <LI>2Sofic Groups a IMAR
            <LI>2Theory and Operator Algebra
            <LI>2 Geometric Group Theory
            <LI> 4th annual meeting
            <LI>2007: Co-organizer of 
        </ul>
    </div>

【讨论】：