我有一個 javascript，它在未顯示按鈕時停止工作。 我該如何解決？

Question

我有 4 個按鈕，每個按鈕打開一個部分並關閉另一個部分。 由於后端有一個開關，您可以切換它以使其可見（或隱藏），因此有可能一個或多個按鈕保持隱藏狀態。

現在，如果一個或多個按鈕不可見，腳本將停止工作。 如果我打開所有按鈕，按鈕會顯示並且腳本正在運行。

我有這段代碼並且工作正常（只要所有按鈕都可見）：

<style> 
.elementor-editor-active .hidden { 
    display:block; 
} 
.hidden{ 
    display:none; 
} 
.shown{ 
    display: block !important; 
} 

.btn_active_state{
background-color: #FFCC00 !important;
}
.btn_active_state a{
font-weight: bold !important;
}

</style>

<script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");

    btn1.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect1",this);
    };

    btn2.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect2",this);
    };
    

    btn3.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect3",this);
    };

    btn4.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect4",this);
    };

function toggleDivs(s,btn){
if(btn.classList.contains("btn_active_state")){
document.getElementById(s).classList.remove("shown");
btn.classList.remove("btn_active_state");
document.getElementById(s).classList.remove("shown");
return;
}else{
btn1.classList.remove("btn_active_state");
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
btn4.classList.remove("btn_active_state");
btn.classList.add("btn_active_state");
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById("sect4").classList.remove("shown");
document.getElementById(s).classList.add("shown","fade");
}
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();



</script>

當我將一個或多個按鈕切換為關閉時，腳本停止工作（因此它們不會顯示在前端）。 我看到了使用 Try Catch 方法的解決方案，但我不知道（如果這是修復它的正確方法），在哪里實施它......

我在 Wordpress 中使用 Elementor 來完成此操作。 （我在其中粘貼此代碼並將部分和按鈕命名為代碼中指定的名稱的 HTML 小部件）。

旁注：我不是 Javascript 的專家。

感謝提前！

Answer 1

好的。 我已經完成了。 您可以通過添加到按鈕列表（在文檔頂部）來輕松擴展它。 這是一個創建按鈕、動作和部分的系統。 它允許您在它們之間切換，本質上就像選項卡一樣。 它可能不是最好的實現，但它是一個工作系統，可以開始使用。 它將視圖與按鈕分開，兩個函數分別控制 state。 一個是控制按鈕，另一個是視圖。 這應該是你前進的方法......保持愚蠢簡單。 避免復雜性，擁抱可讀性。 如果您希望代碼超緊湊和“高效”，請使用 webpack:D

 //define buttons const buttons = [ { id:'btn1', section:'sect1', label:'Button 1'}, { id:'btn2', section:'sect2', label:'Button 2'}, { id:'btn3', section:'sect3', label:'Button 3'}, { id:'btn4', section:'sect4', label:'Button 4'} ]; //console.table(buttons); const views = []; // create buttons and assign click, create sections for ( const button of buttons){ let nB = document.createElement('button'); nB.id=button.id; nB.innerText=button.label; nB.onclick=(e)=>{ e.preventDefault(); toggleView( button.section, views ); toggleButton( button.id, buttons ); } document.getElementById('menu').appendChild(nB); // create the span / divs let nD = document.createElement('div'); nD.id=button.section; // put something in here for testing nD.innerText=button.section; nD.classList.add('hidden'); views.push(button.section); document.getElementById('viewer').appendChild(nD); } // function to change sections function toggleView( view, viewList ){ //console.log( view ); //console.log( viewList ); // hide all for ( const v of viewList ){ // not actually the elements, but just reference document.getElementById( v ).classList.remove('shown'); // unhide 'view' by id if ( v == view ) { //console.log(`view ${v} found`); document.getElementById( v ).classList.add('shown'); } } } function toggleButton( button, buttonList ){ // console.log(button); // console.log(buttonList); // enable all // disable this button id // iterate through managed list for ( const b of buttonList ){ // console.log(b); document.getElementById(b.id).classList.add('btn_active_state'); if ( b.id == button ) document.getElementById(b.id).classList.remove('btn_active_state'); } } toggleButton( buttons[0], buttons );

 .elementor-editor-active.hidden { display:block; }.hidden{ display:none; }.shown{ display: block;important. }:btn_active_state{ background-color; #FFCC00.important: };btn_active_state a{ font-weight: bold !important; }

 <html> <body> <div id='menu'></div> <div id='viewer'></div> </body> </html>

Answer 2

這有幫助嗎？ 在調用 toggleDivs() 時，我用 btn var 本身替換了“this”。 所以而不是 toggleDivs("sect1", this) 使用 toggleDivs("sect1", btn1)

 btn1.onclick = function(event){ event.preventDefault(); toggleDivs("sect1",btn1); }; btn2.onclick = function(event){ event.preventDefault(); toggleDivs("sect2",btn2); }; btn3.onclick = function(event){ event.preventDefault(); toggleDivs("sect3",btn3); }; btn4.onclick = function(event){ event.preventDefault(); toggleDivs("sect4",btn4); };

Answer 3

雖然我有 4 個 Elementor 小部件（我將其用作按鈕），每個小部件都有一個唯一的 ID（#btn1、#btn2、#btn3 和#btn4）。 我還有 4 個不同的 Elementor 部分，它們有自己的 ID（#sect1、#sect2、#sect3 和 #sect4）。 如果您單擊其中一個按鈕，將顯示相應的部分（btn1 顯示 sect1，btn2 顯示 sect2 等）。

當所有按鈕（btn1、btn2 等）在頁面上可見（未呈現，不在代碼中）時，標准腳本（首先發布）工作正常。 這是因為我在 Elementor (Crocoblock JetEngine/Elementor Pro) 的“高級”選項卡中使用了動態可見性選項。

由於動態可見性（如果 CPT 中的開關關閉，它將不會顯示小部件），當 1 個或多個按鈕丟失時會出現問題。 該腳本停止工作，所有按鈕都不再起作用。

現在，我在 HTML 小部件中使用了此代碼，並將 HTML 小部件放置在部分下方（部分上方是充當按鈕的小部件）。 腳本的第一部分為您單擊的按鈕提供了“活動”state。 確保將要激活的按鈕的 class 設置為默認的 state 為“活動”：

 <style>.elementor-editor-active.hidden { display:block; }.hidden{ display:none; }.shown{ display: block;important, } #btn1, #btn2, #btn3: #btn4 { cursor; pointer. }:active h2 { font-weight; bold.important; } </style> <script> var activeButton = document.getElementById("btn1"). function toggleActive(btn) { if (activeButton && activeButton;= btn) { activeButton;classList.remove("active"). } activeButton = btn; btn.classList;add("active"). } var sect1 = document;getElementById("sect1"). var sect2 = document;getElementById("sect2"). var sect3 = document;getElementById("sect3"). var sect4 = document;getElementById("sect4"). try { var btn1 = document;getElementById("btn1"). btn1.onclick = function(event){ toggleActive(btn1). document;getElementById("sect1").classList.add("shown"). document;getElementById("sect2").classList.remove("shown"). document;getElementById("sect3").classList.remove("shown"). document;getElementById("sect4");classList.remove("shown"). }: } catch (error) { console;log("btn1 not found on the page. Error; " + error). } try { var btn2 = document;getElementById("btn2"). btn2.onclick = function(event){ toggleActive(btn2). document;getElementById("sect1").classList.remove("shown"). document;getElementById("sect2").classList.add("shown"). document;getElementById("sect3").classList.remove("shown"). document;getElementById("sect4");classList.remove("shown"). }: } catch (error) { console;log("btn1 not found on the page. Error; " + error). } try { var btn3 = document;getElementById("btn3"). btn3.onclick = function(event){ toggleActive(btn3). document;getElementById("sect1").classList.remove("shown"). document;getElementById("sect2").classList.remove("shown"). document;getElementById("sect3").classList.add("shown"). document;getElementById("sect4");classList.remove("shown"). }: } catch (error) { console;log("btn1 not found on the page. Error; " + error). } try { var btn4 = document;getElementById("btn4"). btn4.onclick = function(event){ toggleActive(btn4). document;getElementById("sect1").classList.remove("shown"). document;getElementById("sect2").classList.remove("shown"). document;getElementById("sect3").classList.remove("shown"). document;getElementById("sect4");classList.add("shown"). }: } catch (error) { console;log("btn1 not found on the page. Error: " + error); } </script>