根据作为参数传递给 javascript 的值更改 div 样式

Question

这是javascript我试过的

function toggle(clicked_id,name) {
   alert(clicked_id);
   alert(name);
   var text = document.getElementById("clicked_id");
   var ele = document.getElementById("name");
   alert(ele.style.display);
   if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "+";
    text.value="+"
     }
   else {
    ele.style.display = "block";
    text.innerHTML = "-";
    text.value="-"
   }
   return
  }

并且 html 是

<input type="button" id="displayText1" onClick="return toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText1">
       
       <div id="toggleText1" style="display: none"><h1>Wallet Info Here</h1></div> </div>

<input type="button" id="displayText2" onClick="toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText2">
       
       <div id="toggleText2" style="display: none"><h1>Wallet Info Here</h1></div> </div>

我尝试了这个，但我收到的只是警报.. div 风格没有变化。那不是改变隐藏或显示模式

Answer 1

只需删除变量名周围的引号

var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);

DEMO

Answer 2

问题是这样的：

var text = document.getElementById("clicked_id"); // func arg is in string format
var ele = document.getElementById("name");  // func arg is in string format

您必须在不带引号的情况下使用它。

var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);

但是还有更好的方法，您可以这样做：

<input type="button" id="displayText1" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText1">

<input type="button" id="displayText2" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText2">

只需在参数中传递 this，您就可以像这样更改函数：

function toggle(el) {
    var text = el;
    var ele = document.getElementById(el.name);
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "+";
        text.value="+"
    } else {
        ele.style.display = "block";
        text.innerHTML = "-";
        text.value="-"
    }
}

因为你不需要 return 任何它只是一个 dom 操作的东西，所以你可以删除 return 语句。

我建议你避免使用内联事件处理程序，所以如果你对不引人注目的 javascript 感兴趣，那么你可以将这个事件处理程序放在一个带有 toggle() 函数的 js 文件中，然后你就可以使用它了:

document.getElementById('displayText1').addEventListener('click', function(){
    toggle(this);
});
document.getElementById('displayText2').addEventListener('click', function(){
    toggle(this);
});

或使用 querySelectorAll 方法：

document.querySelectorAll('#displayText1, #displayText2').addEventListener('click', function(){
        toggle(this);
    });

Answer 3

变量 "clicked_id" 和 "name" 周围的引号使它们充当字符串。并且没有具有这些 id 的元素。只需删除引号，事情就会解决。

var text = document.getElementById(clicked_id);

var ele = document.getElementById(name);

根据作为参数传递给 javascript 的值更改 div 样式

change div style according to values passed as argument to javascript

html

javascript

css

jquery

onclick

DEMO