Question

我的Javascript函数有问题。我试图解释我要做什么。我正在使用Bootstrap的手风琴在两个不同的容器之间切换。我有两个可折叠按钮（由Fontawosome图标制成），基本上是箭头。当用户打开页面时，两个按钮都按下。单击按钮后，将打开一个容器，“向下箭头”应更改为“向上箭头”。但是，例如，如果在单击第一个箭头时第二个箭头已经向上，则第二个箭头应返回到向下位置，而第一个箭头应返回到向上位置。像这样：

箭头↓＆2.箭头↑--- 1.单击箭头-> 1.箭头↑＆2.箭头↓
箭头↑＆2.箭头↓--- 2.单击箭头-> 1.箭头↓＆2.箭头↑

我已经做了一些Javascript函数来在页面上实现此功能，但是我无法使其正常工作。我已经使用开发人员工具检查过该页面可以运行所有功能，尽管该页面仅在用户单击箭头时才运行。由于某种原因，打开页面时，箭头甚至不可见。您能在Codepen上查看我的代码，看看有什么问题吗？

Javascript：

var collapseButton1 = document.getElementById("collapse-button1");
var collapseButton2 = document.getElementById("collapse-button2");

document.querySelector('#collapse-button1').addEventListener('click', 
changeCollapseButton1(collapseButton1, collapseButton2));
document.querySelector('#collapse-button2').addEventListener('click', 
changeCollapseButton2(collapseButton2, collapseButton1));


function changeCollapseButton1(button1, button2){
    console.log("Inside function changeCollapseButton1")
    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
       console.log("Inside if.")
       button1 = changeUp(button1);
       button2 = document.querySelector('#collapse-
button2').addEventListener('click', changeDown(button2));   
       return button1 && button2;
   } else {
       console.log("Inside else.");
       button1 = changeDown(button1);
       return button1;
   }
}

function changeCollapseButton2(button2, button1){
    console.log("Inside function changeCollapseButton2")
    if (button2.classList.contains('fa-chevron-down') && 
button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        button2 = changeUp(button2);
        button1 = document.querySelector('#collapse-
button1').addEventListener('click', changeDown(button1));
       return button2 && button1;
   } else {
       console.log("Inside changeCollapseButton2 else.")
       button2 = changeDown(button2);
       return button2;
   }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton = whichButton.classList.toggle('fa-chevron-down');
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-up');
}
//=========================

孔代码在代码笔中：https://codepen.io/Miina/pen/XxRveg Codepen不包含图像，但不要让图像分散您的注意力。

更新：

我对代码进行了一些更改。我将事件监听器添加到html中是这样的：

<i id="collapse-button1" class="fas fa-chevron-down fa-2x" 
onclick="changeCollapseButton1()" style="color: rgb(64, 127, 127)">
</i>

然后我对Java脚本进行了更改：

function changeCollapseButton1(){
    console.log("Inside function changeCollapseButton1")
    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
        console.log("Inside if.")
        changeUp(button1);
        changeDown(button2);    
    } else {
        console.log("Inside else.");
        changeDown(button1);
    }
}

function changeCollapseButton2(){
    console.log("Inside function changeCollapseButton2");

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button2.classList.contains('fa-chevron-down') && 
    button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        changeUp(button2);
        changeDown(button1);
    } else {
        console.log("Inside changeCollapseButton2 else.")
        changeDown(button2);
    }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton.classList.toggle('fa-chevron-down');
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-up');
}
//=========================

现在它可以“更好”地工作，但是单击按钮时，图标就消失了。所以我认为这条线有问题：

whichButton.classList.toggle('fa-chevron-down');

这：

whichButton.classList.toggle('fa-chevron-up');

但是我不知道这是什么。更新的代码笔在这里：https://codepen.io/Miina/pen/mzwqZx?editors=1010

嘿，我知道了！！我两次调用了错误的函数，并且不得不对classList.toggle函数调用进行一些更改。这是可行的解决方案：

function changeCollapseButton1(){
    console.log("Inside function changeCollapseButton1")

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
        console.log("Inside if.")
        changeUp(button1);
        changeDown(button2);    
    } else {
        console.log("Inside else.");
        changeUp(button1);
    }
}

function changeCollapseButton2(){
    console.log("Inside function changeCollapseButton2");

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button2.classList.contains('fa-chevron-down') && 
    button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        changeUp(button2);
        changeDown(button1);
    } else {
        console.log("Inside changeCollapseButton2 else.")
        changeUp(button2);
    }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton.classList.toggle('fa-chevron-up', false);
    whichButton.classList.toggle('fa-chevron-down', true);
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-down', false);
    whichButton.classList.toggle('fa-chevron-up', true);
}
//=========================

Answer 1

document.querySelector('#collapse-button1').addEventListener('click', 
changeCollapseButton1(collapseButton1, collapseButton2));

这将调用changeCollapseButton1(collapseButton1, collapseButton2)并将其结果传递给addEventListener。你可能打算

document
    .querySelector('#collapse-button1')
    .addEventListener('click', 
        function() {changeCollapseButton1(collapseButton1, collapseButton2);}
    );

您所有的addEventListener似乎都在调用预期的处理程序，并尝试将结果设置为处理程序。

HTML和JavaScript-函数内部的函数不起作用

1 个答案: