我有一个javascript，停止工作时，一个按钮不显示,我该如何修复它？

yftpprvb 于 2023-01-24 发布在 Java

关注(0)|答案(2)|浏览(125)

我有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>

当我将一个或多个按钮切换到OFF时，脚本停止工作（这样它们就不会显示在前端）。我看到了使用Try Catch方法的解决方案，但我不知道（如果这是正确的解决方法），在哪里实现它...

我在Wordpress中使用Elementor来完成这个任务。（HTML小部件，我在其中粘贴了这段代码，并将部分和按钮命名为代码中命名的名称）。

旁注：我不是JavascriptMaven。
谢谢！

JavaScript

来源：https://stackoverflow.com/questions/75135677/i-have-a-javascript-that-stops-working-when-a-button-is-not-showed-how-can-i-fi

2条答案

按热度按时间

ar5n3qh51#

好的。我已经完成了。你可以通过添加到按钮列表来轻松扩展它（在文档的顶部）。这是一个创建按钮，动作和部分的系统。它允许你在它们之间切换，本质上就像标签一样。它可能不是最好的实现，但它是一个工作系统，可以开始使用。它将视图与按钮分离，两个函数来控制每一个的状态。一个是控制按钮，另一个是视图。这应该是你前进的方法...保持愚蠢的简单。避免复杂，拥抱可读性。如果你想让代码超紧凑和“高效”，使用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>

赞(0）回复(0）举报 2023-01-24

db2dz4w82#

调用toggleDivs（）时，我用btn变量本身替换了'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);
    };

// try to assign the var btn1 to the element
var btn1 = document.getElementById('btn1');
// check to see if it is valid / not null
if ( btn1 ){
  // if it gets here, then the button is valid
  btn1.onclick = (e) =>{
    // show / hide sections
  }
}
//otherwise, if btn1==null it will continue to the next

赞(0）回复(0）举报 2023-01-24

我来回答

我有一个javascript，停止工作时，一个按钮不显示,我该如何修复它？

2条答案

相关问题

热门标签

最新问答