这是旧版本
<html><head>
<script type="text/javascript">
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>
</head>
<body>
<span onclick="showhide('1'); return(false);">show/hide 1</span>
<span onclick="showhide('2'); return(false);">show/hide 2</span>
<div id="1" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">
somthing here 1
</div>
<div id="2" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">
somthing here 2
</div>
</body>
</html>
但现在我想用 jquery 来做到这一点，这里是示例 http://jsfiddle.net/AE75v/或代码
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#1").click(function() {
if($("#1_1").is(":visible")) {
$(this).find('span').html('▲');
} else {
$(this).find('span').html('▼');
}
$("#1_1").slideToggle();
});
});
</script>
</head>
<body>
<a id="1">Show 1 <span>▲</span></a>
<div id="1_1" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">Some text 1 here</div>
<p>
<a id="2">Show 2 <span>▲</span></a>
<div id="2_1" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">Some text 2 here</div>
</body>
</html>
如果 onclick="ID"与 <div id="ID"> 中的 ID 相同，如何与 onclick 配合使用显示/隐藏...
所有这一切都是因为我不想一直通过添加 #ID 和 #ID_1 来更改 jquery 代码
最佳答案
我将 id 更改为这样的类:
$(document).ready(function() {
$(".myLink").click(function() {
var myLink = $(this),
myContainer = myLink.next(".myContainer");
if (myContainer.is(":visible")) {
myLink.find('span').html('▲');
} else {
myLink.find('span').html('▼');
}
myContainer.slideToggle();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a class="myLink">Show 1 <span>▲</span></a>
<div class="myContainer" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">Some text 1 here</div>
<br />
<a class="myLink">Show 2 <span>▲</span></a>
<div class="myContainer" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">Some text 2 here</div>此解决方案取决于相应的容器 (div.myContainer) 遵循链接 (a.myLink) 的标准。
关于javascript - 从 dom 到 jquery 的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22247626/