Question

对于开始，我有这个带有示例数据的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中。

还有其他建议吗？

Answer 1

只需使用HTML5 data-*属性：

<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');

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

此处有效：http://jsfiddle.net/c4fQ3/1/（尝试更改.on元素的data-toggle值）

使用jQuery检索属性中的文本？

1 个答案: