Javascript

Question

我正在尝试弄清楚如何使这段代码更加简洁。我尝试了很多东西，但似乎没有任何效果。

toggle1.onclick = function() {
    var div = document.getElementById('toggle-content1');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
        document.getElementById("arrow1").className = "arrow-right";
    }
    else {
        div.style.display = 'block';
        document.getElementById("arrow1").className = "arrow-down";
    }
};

toggle2.onclick = function() {
    var div = document.getElementById('toggle-content2');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
        document.getElementById("arrow2").className = "arrow-right";
    }
    else {
        div.style.display = 'block';
        document.getElementById("arrow2").className = "arrow-down";
    }
};

toggle3.onclick = function() {
    var div = document.getElementById('toggle-content3');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
        document.getElementById("arrow3").className = "arrow-right";
    }
    else {
        div.style.display = 'block';
        document.getElementById("arrow3").className = "arrow-down";
    }
};

如果有人有任何提示或学习资源可供我参考，我将不胜感激！据我了解，我需要以某种方式提取数字，然后将其附加到切换功能中？

谢谢！

Answer 1

var toggle1 = document.getElementById('toggle-switch1');
var toggle2 = document.getElementById('toggle-switch2');
var toggle3 = document.getElementById('toggle-switch3');

function handler(divId) {
    var div = document.getElementById(divId);

    div.style.display = div.style.display !== 'none' ? 'none' : 'block';
};

toggle1.onclick = handler.bind('toggle-content1');
toggle2.onclick = handler.bind('toggle-content2');
toggle3.onclick = handler.bind('toggle-content3');

或

var toggle1 = document.getElementById('toggle-switch1');

var switches = {
    'toggle-switch1': 'toggle-content1',
    'toggle-switch2': 'toggle-content2',
    'toggle-switch3': 'toggle-content3',
};

toggle1.parentElement.onclick = function(event) {
    if (switches[event.target.id]) {
        var div = document.getElementById(switches[event.target.id]);
        div.style.display = div.style.display !== 'none' ? 'none' : 'block';
    }
}

或者您可以在 data-switchTarget 属性中为 toggle-switch1 和 toggle-switch2 和 toggle-switch3 指定适当的目标名称，即 toggle-switch1 为 toggle-content1，toggle-switch2 和 toggle-content3 为 toggle-content2对于 toggle-switchTarget，例如：

<div id='toggle-switch1' data-switchTarget='toggle-content1'>...</div>

代码为：

var toggle1 = document.getElementById('toggle-switch1');

toggle1.parentElement.onclick = function(event) {
    if (event.target.dataset.switchTarget) {
        var div = document.getElementById(event.target.dataset.switchTarget);
        div.style.display = div.style.display !== 'none' ? 'none' : 'block';
    }
}

更新：您刚刚更新了问题，所以在这种情况下您可以使用：

var toggle1 = document.getElementById('toggle-switch1');

var switches = {
    'toggle-switch1': {content: 'toggle-content1', arrow: 'arrow1'},
    'toggle-switch2': {content: 'toggle-content2', arrow: 'arrow2'},
    'toggle-switch3': {content: 'toggle-content3', arrow: 'arrow3'},
};

toggle1.parentElement.onclick = function(event) {
    if (switches[event.target.id]) {
        var div = document.getElementById(switches[event.target.id].content);
        var isDivDisplayed = div.style.display !== 'none';

        div.style.display = isDivDisplayed ? 'none' : 'block';
        document.getElementById(switches[event.target.id].arrow).className = isDivDisplayed ? 'arrow-right' : 'arrow-down';
    }
}

Javascript - 用于不同操作的多个 onclick 元素

Javascript - Multiple onclick elements for different actions

html

loops

onclick

repeat