使用 jquery 的数据属性来关联两个元素答案

【问题标题】：Using data attributes for jquery to relate two elements使用 jquery 的数据属性来关联两个元素
【发布时间】：2013-11-05 01:49:07
【问题描述】：

我在 jQuery 中学到的第一件事是 Click() 函数，它在让一个元素影响另一个元素方面有多么出色。但是，当我有一个项目数组（在我的文档中）我想要影响整个“另一个元素数组再次散布在我的文档中”时，我应该怎么做？

在我奇怪的头脑中，我正在考虑使用数据属性。你可以在这里看到一个非常简化的版本：http://jsfiddle.net/Qnzpg/

首先，我知道我在 jsfiddle 上的示例有很多更好的解决方案。但是，真正的应用程序要复杂一些，并且需要这种方法。

我正在尝试将我的数据属性的值作为变量传递，并让共享该变量的元素生效（在我的示例中，通过添加一个类）：

$("#menu [data-cell]").click(function (e){
    e.preventDefault;

    //make the data value a variable
    var $cell = $(this).data();

    //find the other element with the same data value and add the class named "open"
    $('#pages [data-cell='$cell']').addClass('open');
});

我一直在摆弄我的 jQuery 很长一段时间，并且觉得最好请专家。

我做错了什么？

【问题讨论】：

标签： jquery variables attr

【解决方案1】：

给你：

$('#menu li a').each(function() {
    $(this).click(function() {
        var attr = $(this).parents('li').attr('data-cell');
        $('#pages div').each(function() {
            $(this).removeClass('open');
            if($(this).attr('data-cell') == attr) {
                $(this).addClass('open');
            }
        });
    });
});

小提琴：http://jsfiddle.net/Qnzpg/7/

【讨论】：

运气好吗？我很想知道这是否适合你:)
虽然这在我的实际应用程序中不起作用，但这帮助我解决了我做错的事情。我想知道你为什么决定使用.each()。你能解释一下为什么这会让事情奏效吗？
嗨@invot，感谢您的反馈。 api.jquery.com/each 是一个循环结构，允许您为每个项目（在本例中为每个链接）设置上下文，然后将后面的代码与该上下文相关联。你可以这样理解：对于每个链接，当点击时，将指定的属性存储为一个变量......然后对于每个指定的 div，检查相同的属性变量，并执行一些操作。

【解决方案2】：

您的字符串连接没有正确的语法，我认为您只想获取 data-cell 属性的值。

var $cell = $(this).data('cell');
$('#pages [data-cell="' + $cell + '"]')

为了安全起见，我将选择器值用双引号括起来，以防数据中有空格。

【讨论】：

【解决方案3】：

我修改了你的代码，现在可以正常运行了

首先我认为你错了，因为你没有连接变量 $cell 但在我意识到你没有得到 attr 数据单元之后，你需要从数据单元中获取值，如下所示：

var $cell = $(this).attr('data-cell');

并且需要像这样连接 $cell

$('#pages [data-cell='+$cell+']').toggle('open');

【讨论】：