使用 jQuery 检索属性中的文本

Retrieve text within an attribute using jQuery?

本文关键字：文本 属性 jQuery 检索 使用      更新时间：2023-09-26

对于开始，我有这个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中。

还有其他建议吗？

只需使用 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 的属性等于选择器来查找具有相同data-toggle值的.on元素。

重要提示：如果您需要更改.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值）

相关文章：