如何使用 javascript 变量使用 jQuery 隐藏元素
How do I hide an element with jQuery using a javascript variable
>我在 html 代码中隐藏带有以下 id 的页面元素时遇到问题
<table cellspacing=5 cellpadding=3>
<tr>
<td id="lst2"><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td>
<td><a href="unibay.php" class="button edit">EDIT</a></td>
<td><a href="#" onclick="del('lst1');" class="button cross">DELETE</a></td>
</tr>
<tr id="lst2">
<td><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td>
<td><a href="unibay.php" class="button edit">EDIT</a></td>
<td><a href="#" value="list2" onclick="del('lst1');" class="button">DELETE</a></td>
</tr>
</table>
我希望能够使用在javascript函数中调用的jQuery隐藏具有选定id的元素。下面是代码,但它不起作用:
function del(obj) {
$(document).ready(function(){
var tdiv = document.getElementById(obj) ;
var sdiv = "#" + tdiv ;
$('.button').click(function () {
$(sdiv).fadeOut('slow');
});
});
}
我认为你应该这样做,因为你的obj
包含一个字符串,你的目标id
,那么遵循方法就足够了。
var sdiv = "#" + obj;
$('.button').click(function () {
$(sdiv).fadeOut('slow');
});
代码中的问题
var tdiv = document.getElementById(obj);
行返回一个 DOM 元素。因此,如果您需要在代码中使用它,那么它将如下所示:function del() { var tdiv = document.getElementById(obj); $('.button').click(function() { $(tdiv).fadeOut('slow'); }); }
在这里,$(tdiv)
会将你的 tdiv
元素变成一个 jQuery 对象。但tdiv.fadeOut('slow')
行不通。
而且您不需要
del()
功能中的$(document).ready()
。因此,您的代码将如下所示:function del(obj) { var sdiv = "#" + obj; $('.button').click(function () { $(sdiv).fadeOut('slow'); }); }
$(function() {
$('.button').click(function () {
$(this).parent().parent().fadeOut('slow');
});
});
你的代码有问题:
-
document.ready
不应该在函数内部。您将函数放在document.ready
- 您将单击事件绑定在函数中。这不是必需的,因为您可以在 click 事件中使用
this
来获取单击的元素,然后.parent()
两次以获取它所属的tr
。(一次给你td
,再给你td
的父母,也就是tr
)
在这一行中:
var tdiv = document.getElementById(obj);
getElementById() 返回 DOM 元素,然后将其分配给 'tdiv'。因此,当您将其连接到"#"字符串时,您实际上是在添加一个字符串 + 一个 DOM 对象(这不起作用)。
有一个简单的解决方法。 由于您已经将元素的 id 存储在变量 'obj' 中,因此您可以连接它:
var sdiv = "#" + obj;
$('.button').click(function () {
$(sdiv).fadeOut('slow');
});
其他一些海报指出,你不应该把document.ready()放在del函数中,而应该放在函数之外。 我完全不同意。 如果您遵循他们的建议,您的代码将中断,因为"del"函数在全局命名空间中不可用。
相关文章:
- Jquery隐藏未触发
- 使用JavaScript或jQuery隐藏和显示元素
- 使用jQuery隐藏和显示表中的额外列
- JQuery隐藏/显示无法正常工作
- 使用jQuery隐藏和显示具有相同Class的类
- 使用jquery隐藏、显示
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- jQuery隐藏函数与“;按钮“;以及“;span”;但不是用“;a“;要素
- jQuery隐藏函数出现问题
- jQuery 隐藏按钮,如果它们不包含文本
- 我无法用jQuery隐藏我的段落
- jQuery 隐藏选项元素
- 使用 JQuery 隐藏没有数据(包括标头)且具有相同表 ID 的列
- 使用jQuery隐藏元素;不起作用
- jQuery:隐藏类,以便隐藏该类随后创建的元素
- jQuery隐藏只触发一次
- jQuery隐藏所有trs或td,而不仅仅是一个
- JQuery隐藏/显示不起作用
- jQuery隐藏/显示问题