如何发送不同的ID作为JS函数的参数？
[英]How can I send a different ID as a parameter for a JS function?
问题描述
I'm trying to send an id to a function but I don't know how to do it. 
我正在尝试将ID发送给函数，但是我不知道该怎么做。 I have a my function like this 我有这样的功能
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';
}
}
and my HTML like this 和我的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>
But, I have more divs with diferent id's, so I don't want to create more functions for each id. 但是，我有更多具有不同ID的div，所以我不想为每个ID创建更多功能。 How can I send the "one, two, three,..." id to another onclick div? 如何将“一个，两个，三个...” ID发送给另一个onclick div？
5 个解决方案
解决方案1
1 2014-11-15 21:15:48
html: 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: 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: CSS：
.hide {
display: none;
}
I chose this solution because is very scalable and it doesn't override css 我选择此解决方案是因为它具有很高的可扩展性，并且不会覆盖CSS。
解决方案2
0 2014-11-15 20:41:10
Try 尝试
<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';
}
}
解决方案3
0 2014-11-15 20:43:56
You're quoting in wrong place and You have a typo in 3rd line. 您在错误的地方引用，第三行有错字。 Change Your code on this: 在此更改您的代码：
JavaScript: JavaScript的：
function showHide(id) {
if (document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = 'none';
}
}
HTML: HTML：
<div onclick="showHide('one');">
And, for the record, use jQuery library. 并且，为了记录在案，请使用jQuery库。 It is very useful and easier than using only JavaScript. 这比仅使用JavaScript非常有用且容易。 Thanks to it, Your JavaScript code would look like this: 多亏了它，您的JavaScript代码如下所示：
function showHide(id) {
if ($('#'+id).is(':hidden')) {
$('#'+id).show();
}
else {
$('#'+id).hide();
}
}
解决方案4
0 2014-11-15 20:45:43
Some syntax edits to your code, this ShowHide function should work with any ID you pass it. 对代码进行一些语法编辑，此ShowHide函数应与您传递的任何ID一起使用。 Just be sure you pass the ID as a string 只要确保您将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';
}
};
解决方案5
0 2014-11-15 20:47:31
you had also some typos like BydId ... try this http://jsfiddle.net/nphLvn3j/ 您也有一些像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';
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.