Javascript 如何将不同的ID作为JS函数的参数发送？_Javascript_Html_Function

Javascript 如何将不同的ID作为JS函数的参数发送？

javascript html function

Javascript 如何将不同的ID作为JS函数的参数发送？,javascript,html,function,Javascript,Html,Function,我正在尝试向函数发送id，但我不知道如何执行。我有一个类似这样的函数 function showHide(item) { if (document.getElementById('item.id').style.display=='none') { document.getElementBydId('item.id').style.display = ''; } else { document

我正在尝试向函数发送id，但我不知道如何执行。我有一个类似这样的函数

    function showHide(item) {
        if (document.getElementById('item.id').style.display=='none') {
            document.getElementBydId('item.id').style.display = '';
        }
        else {
            document.getElementById('item.id').style.display = 'none';
        }
    }

    <div onclick="showHide(one);">
        <img src="images/1.png">
    </div>
    <div id="one" style="display:none">
        <h1>X List</h1>
        <ul>
            <li>Elmt 1</li>
            <li>Elmt 2</li>
            <li>Elmt 3</li>
            <li>Elmt 4</li>
        </ul>
    </div>

我的HTML是这样的

    function showHide(item) {
        if (document.getElementById('item.id').style.display=='none') {
            document.getElementBydId('item.id').style.display = '';
        }
        else {
            document.getElementById('item.id').style.display = 'none';
        }
    }

    <div onclick="showHide(one);">
        <img src="images/1.png">
    </div>
    <div id="one" style="display:none">
        <h1>X List</h1>
        <ul>
            <li>Elmt 1</li>
            <li>Elmt 2</li>
            <li>Elmt 3</li>
            <li>Elmt 4</li>
        </ul>
    </div>


X列表

埃尔姆特1
埃尔姆特2号
埃尔姆特3
埃尔姆特4

但是，我有更多具有不同id的div，因此我不想为每个id创建更多函数。如何将“一，二，三，…”id发送到另一个onclick div

试试看

<div onclick="showHide('one');">
function showHide(item) {
    var el = document.getElementById(item);
    if (el.style.display === 'none') {
        el.style.display = 'block';
    } else {
        el.style.display = 'none';
    }
}


函数showHide（项目）{
var el=document.getElementById（项目）；
如果（el.style.display==='none'）{
el.style.display='block'；
}否则{
el.style.display='none'；
}
}

您的报价位置错误，第三行输入错误。更改此服务器上的代码：

JavaScript:

function showHide(id) {
    if (document.getElementById(id).style.display=='none') {
        document.getElementById(id).style.display = '';
    }
    else {
        document.getElementById(id).style.display = 'none';
    }
}

(function () {
     var hasClass = function (ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
     },
     removeClass = function (ele, cls) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
     },
     showHide = function (item) {
      var element = document.getElementById('match-' + this.id);
          if(hasClass(element, 'hide')) {
              removeClass(element, 'hide');
          } else {
              element.className = element.className + 'hide';
          }
      },
      cell = document.querySelectorAll('.visibility'),
      i;
    for(i = cell.length - 1; i >= 0; i--) {
        cell[i].addEventListener('click', showHide, false);
    }
}());

HTML:

如果对代码进行一些语法编辑，则此ShowHide函数应与您传递给它的任何ID一起使用。只需确保将ID作为字符串传递即可

<div onclick="showHide('one');"> // Added quotes here
<img src="images/1.png" />
</div>

<div id="one" style="display:none">
    <h1>X List</h1>
    <ul>
        <li>Elmt 1</li>
        <li>Elmt 2</li>
        <li>Elmt 3</li>
        <li>Elmt 4</li>
    </ul>
</div>


function showHide(item) {
    if (document.getElementById(item).style.display=='none') { // Use the ID (a string) to get the element
        document.getElementBydId(item).style.display = '';
    }
    else {
        document.getElementById(item).style.display = 'none';
    }
};

//在此处添加了引号
X列表

埃尔姆特1
埃尔姆特2号
埃尔姆特3
埃尔姆特4

函数showHide（项目）{
if（document.getElementById（item.style.display=='none'）{//使用ID（字符串）获取元素
document.getElementBydId（item）.style.display=''；
}
否则{
document.getElementById（item.style.display='none'；
}
};

你也有一些打字错误，比如

BydId

。。。试试这个

html:

css:

我之所以选择这个解决方案，是因为它具有很强的可扩展性，并且不会覆盖css。您引用的是不应该引用的内容，而不是应该引用的内容。您有

'item.id'

，但它应该是

item.id

——但是只需

document.getElementById（item）

和

showHide（“一”）如何

@Abdel不要忘记接受你最喜欢的答案。它会给你声誉，人们会一直回答你的问题。如果你不这样做，并且他们在你的个人资料中看到，他们可能会停止。是的。一分钟前看到了。Updated.OMG“D”是问题所在，但也是引用。感谢you@AbdelPosada不客气，其他人也没看到：）

<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="visibility" id="one">
        <img src="images/1.png">
  </div>
  <div id="match-one">
        <h1>X List</h1>
        <ul>
            <li>Elmt 1</li>
            <li>Elmt 2</li>
            <li>Elmt 3</li>
            <li>Elmt 4</li>
        </ul>
    </div>
</body>
</html>

(function () {
     var hasClass = function (ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
     },
     removeClass = function (ele, cls) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
     },
     showHide = function (item) {
      var element = document.getElementById('match-' + this.id);
          if(hasClass(element, 'hide')) {
              removeClass(element, 'hide');
          } else {
              element.className = element.className + 'hide';
          }
      },
      cell = document.querySelectorAll('.visibility'),
      i;
    for(i = cell.length - 1; i >= 0; i--) {
        cell[i].addEventListener('click', showHide, false);
    }
}());

.hide {
  display: none;
}