传递 div 信息答案

【问题标题】：Passing divs information传递 div 信息
【发布时间】：2009-12-18 08:15:35
【问题描述】：

我有一系列具有相似 id 的 div，除了末尾的唯一 # （cartbtn0、cartbtn1 等）。我创建了一个通用函数，可以使用通配符在所有 div 中工作，但我需要能够捕获被单击的 div 的唯一 # 以替换 #cartbox0:hidden 中的 0。有人可以帮忙吗？

示例代码：

$("*[class^=cartbtn]").click(function () {  
    $(this).hide();  
    $('#cartbox0:hidden').fadeIn(2000);  
});

<div id="cartbtn0" class="cartbtn0">.....</div>  
<div id="cartbox0>" class="cartbox0" style="display:none;">.....<div>  

<div id="cartbtn1" class="cartbtn1">Text</div>  
<div id="cartbox1>" class="cartbox1" style="display:none;">Text<div>

【问题讨论】：

您在该代码 sn-p 中的 ID 似乎无效。例如，您的前两个 div 是 cartbtn0 和 cartbox0>。后者无效，不能在ID中使用>：w3.org/TR/html401/types.html#type-name

标签： jquery jquery-selectors

【解决方案1】：

我假设您正在动态创建这些 div。如果是这种情况，您可以为它们添加一个包含数字的属性。然后，您可以在单击时访问该属性并将其附加到类的末尾。这将使您不必操作类名字符串。

$("*[class^=cartbtn]").click(function () {  
    $(this).hide();
    var num = $(this).attr('ref');  
    $('#cartbox'+num+':hidden').fadeIn(2000);  
});

<div id="cartbtn0" class="cartbtn0" ref="0">.....</div>  
<div id="cartbox0" class="cartbox0" ref="0" style="display:none;">.....<div>  

<div id="cartbtn1" class="cartbtn1" ref="1">Text</div>  
<div id="cartbox1" class="cartbox1" ref="1" style="display:none;">Text<div>

【讨论】：

如果您要为元素添加属性，最好使用data- 前缀。向元素添加任意属性总是违反 HTML 规范（尽管实际上浏览器可以容忍）导致验证问题。但是终于，在 HTML5 中，我们得到了 data- 前缀，这基本上意味着“后面的内容不在规范中，不用担心。”比如data-ref。现在可以了，并且会在 HTML5 验证器正常工作时进行验证。
正确。很高兴知道。谢谢。 :)

【解决方案2】：

你可以使用：

this.id

在点击处理程序中。

【讨论】：

【解决方案3】：

为了避免不得不操纵字符串（你当然可以做$(this).attr('id').substring(...），我想说你最好的选择是：

$(this).find(':hidden').fadeIn(2000);

这会给你点击的 div，如果它是隐藏的。虽然我不太明白你为什么要搜索它，因为你总是在那之前隐藏它。

【讨论】：

【解决方案4】：

试试

$('#'  & this.id.replace('cartbtn','cartbox') + ':hidden').fadeIn(2000);

而不是

$('#cartbox0:hidden').fadeIn(2000);

应该取 div，并替换名称。

【讨论】：