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-content1用于toggle-switch1，toggle-content2用于toggle-switch2和toggle-content3用于切换-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';
    }
}

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

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元素

1 个答案: