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创建更多功能。如何发送＆＃34;一，二，三，......＆＃34; 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

您在错误的地方引用并且您在第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 个答案: