Javascript - 異なるアクションの複数のonclick要素

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'; 
    } 
} 

か、トグルスイッチ1に指定し、トグルスイッチ2をトグル・スイッチ3適切なターゲット名をデータswitchTarget属性に、すなわちトグルスイッチ1用の-content1を切り替えるトグルすることができますトグルスイッチ2とトグルswitchTarget用トグルcontent3、例えばのための-content2：そのため

<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'; 
    } 
}