jQuery 使用最接近的遍历
HTML:
<table border="1px">
<tr>
<td colspan="2">
<div class="commentLink">
<a onclick="ShowBox.call(this); return false;" href="#">Comment</a>
</div>
</td>
</tr>
<tr class="commentBox" style="display: none;">
<td colspan="2">
<div class="hiddenComment">
<textarea class="textComment" rows="2" cols="100"></textarea>
<input class="foo" type="checkbox" />
<input class="commentBtn" type="button" value="Submit" onclick="addComment.call(this); return false;" />
<input class="commentBtn" type="button" value="Cancel" onclick="HideBox.call(this); return false;" />
</div>
</td>
</tr>
</table>
JS: 使用 jquery 1.4.2
function ShowBox() {
var that = this;
$(function () {
$(".commentBox").show();
//$(that).closest('tr').siblings().show();
});
}
function HideBox() {
var that = this;
$(function () {
$(that).siblings(".foo").attr("checked", false);
$(that).siblings(".textComment").empty();
$(".commentBox").hide();
});
}
我有两个函数来显示/隐藏 tr。我现在的代码可以工作,但它也会关闭其他元素。这样做的优雅方法是什么?
HTML:
<table border="1px">
<tr>
<td colspan="2">
<div class="commentLink">
<a onclick="ShowBox.call(this); return false;" href="#">Comment</a>
</div>
</td>
</tr>
<tr class="commentBox" style="display: none;">
<td colspan="2">
<div class="hiddenComment">
<textarea class="textComment" rows="2" cols="100"></textarea>
<input class="foo" type="checkbox" />
<input class="commentBtn" type="button" value="Submit" onclick="addComment.call(this); return false;" />
<input class="commentBtn" type="button" value="Cancel" onclick="HideBox.call(this); return false;" />
</div>
</td>
</tr>
</table>
JS: using jquery 1.4.2
function ShowBox() {
var that = this;
$(function () {
$(".commentBox").show();
//$(that).closest('tr').siblings().show();
});
}
function HideBox() {
var that = this;
$(function () {
$(that).siblings(".foo").attr("checked", false);
$(that).siblings(".textComment").empty();
$(".commentBox").hide();
});
}
I have the two functions to show/hide a tr. The code I have now works, but it will close other elements too. What is the elegant way of doing this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这应该可以做到:
顺便说一句,为了“优雅”,请从 HTML 中删除
onclick
属性!添加点击功能:
然后在
$(document).ready ()
中This should do it:
BTW, for "elegant", remove the
onclick
attributes from the HTML!Then add the click functionality with:
inside the
$(document).ready ()
.我相信
closest
选择器是在 1.3 版本中添加的,所以只需使用它即可。The
closest
selector was added in version 1.3 I believe, so just use that.