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

Question

我正在尝试将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';
        }
    }

和我的HTML这样

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

但是，我有更多具有不同ID的div，所以我不想为每个ID创建更多功能。 如何将“一个，两个，三个...” ID发送给另一个onclick div？

Answer 1

HTML：

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

JavaScript的：

(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);
    }
}());

CSS：

.hide {
  display: none;
}

我选择此解决方案是因为它具有很高的可扩展性，并且不会覆盖CSS。

Answer 2

尝试

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

Answer 3

您在错误的地方引用，第三行有错字。 在此更改您的代码：

JavaScript的：

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

HTML：

<div onclick="showHide('one');">

并且，为了记录在案，请使用jQuery库。 这比仅使用JavaScript非常有用且容易。 多亏了它，您的JavaScript代码如下所示：

function showHide(id) {
    if ($('#'+id).is(':hidden')) {
        $('#'+id).show();
    }
    else {
        $('#'+id).hide();
    }
}

Answer 4

对代码进行一些语法编辑，此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';
    }
};

Answer 5

您也有一些像BydId错字...试试这个http://jsfiddle.net/nphLvn3j/

function showHide(item) {

    if (document.getElementById(item).style.display=='none') {
        document.getElementById(item).style.display = 'block';
    }
    else {
        document.getElementById(item).style.display = 'none';
    }
}

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

问题描述

5 个解决方案

解决方案1
1 2014-11-15 21:15:48

解决方案2
0 2014-11-15 20:41:10

解决方案3
0 2014-11-15 20:43:56

解决方案4
0 2014-11-15 20:45:43

解决方案5
0 2014-11-15 20:47:31

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

问题描述

5 个解决方案

解决方案1 1 2014-11-15 21:15:48

解决方案2 0 2014-11-15 20:41:10

解决方案3 0 2014-11-15 20:43:56

解决方案4 0 2014-11-15 20:45:43

解决方案5 0 2014-11-15 20:47:31

解决方案1
1 2014-11-15 21:15:48

解决方案2
0 2014-11-15 20:41:10

解决方案3
0 2014-11-15 20:43:56

解决方案4
0 2014-11-15 20:45:43

解决方案5
0 2014-11-15 20:47:31