0

首先，我有这个 HTML，其中包含示例数据：

<div class="card {toggle:'someinformation'}">               
    <div class="off"></div>                 
    <div class="on {toggle:'getThisInfo'}"></div>
</div>

我想使用 jQuery 并检索此信息。在询问某人时，他们告诉我使用以下方法（不起作用）：

    var $card = $(this);
    var this_card = $card.children(".on").metadata()["toggle"];

并被告知“this_card”的值将是“getThisInfo”——它不起作用。是的，我确实确保元数据也包含在 HTML 和 jQuery 中。

还有其他建议吗？

4

1 回答 1

3

只需使用 HTML5data-*属性：

<div class="card" data-toggle="someinformation">               
    <div class="off"></div>                 
    <div class="on" data-toggle="getThisInfo"></div>
</div>

然后使用 jQuery 的.data()函数访问它，如下所示：

var $card = $(this),
    this_card = $card.children(".on").data("toggle"); // "getThisInfo"

更新：

根据发布的额外代码，这应该非常适合您：

var $on_cards = $(".card > .on:visible");
if ($on_cards.length == 2) {
    var $card = $('.card:first'), // was $(this), replaced just for this demo
        this_card = $card.children(".on").data("toggle"),
        $matched_cards = $on_cards.filter('[data-toggle="' + this_card + '"]'),
        event_name = "no_match";
    if ($matched_cards.length === 2) {
        event_name = "found_match";
    }
}

这使用 jQuery 的Attribute Equals Selector来查找.on具有相同data-toggle值的元素。

重要提示：如果您需要更改.on' 的值，请不要使用 jQuery 的.data()函数来执行此操作，请使用：

$(selector).attr('data-toggle','your-new-value');

这是因为更新 HTML 中的属性（.attr()选择器检查），同时更新内部 jQuery 对象而不影响实际元素。.prop()[data-toggle=""].data()

它在这里工作： http: //jsfiddle.net/c4fQ3/1/（尝试更改.on元素的data-toggle值）

于 2013-09-08T23:01:10.013 回答