Question

我想要实现的是将类的所有出现设置为其指定的数据 - 除了单击的特定出现，将被设置为唯一的。我的代码在＆＃34; y＆＃34;上给出了一个未定义的错误。变量。我将如何进行数据集的上下文化？

   <div id="menu">
        <ul>
            <li id="menu-tos" data-info="TERMS OF SERVICE">TERMS OF SERVICE</li>
            <li id="menu-contact" data-info="CONTACT">CONTACT</li>
            <li id="menu-signup" data-info="SIGN UP">SIGN UP</li>
            <li id="menu-login" data-info="LOG IN">LOGIN</li>
        </ul>
   </div>

    <script>
      $('#menu ul li').click(function() {
       i = $(this.id);
       y = dataset.info;
       $('#menu ul li').not(i).html(y);
       $(i).html('Something unique');
      });
    </script>

Answer 1

试试这样：

$('#menu ul li').click(function() {
  $(this).siblings().each(function() {
    var info = $(this).data('info');
    $(this).html(info);
  });
  $(this).html('Something unique');
});

此处的完整示例https://jsfiddle.net/_jakob/q49kq3c5/1/

Answer 2

（跳过说明并查看工作版本，滚动到底部）

您的未定义错误是因为您尝试访问dataset，就好像它是一个变量，当它实际上是DOM元素对象的属性时（详情here）。

此外，如果我正确理解您所需的功能，您的代码还会遇到其他一些问题：

i = $(this.id);这将解析为$('menu-tos')。要通过ID选择，您需要#，如下所示：$('#menu-tos')。但是，在您的情况下，实际上没有理由将当前元素设置为变量，因为它已经可以通过$(this)获得。
如上所述，y = dataset.info;不起作用，因为dataset是HTML Element对象的属性，而不是变量。由于您使用的是jQuery，因此使用$(this).data('info')。
$('#menu ul li').not(i).html(y);这不符合你所说的你要做的事情。这会将所有其他<li>元素的HTML设置为您刚刚单击的元素的值。要将每个值设置为自己的值，您需要使用.each()
$(i).html('Something unique');假设i被正确设置为jQuery对象，此处不需要jQuery包装器，只需使用i.html('Something unique');

其他一些有助于您的代码的事情：

现在设置变量的方式（不使用var），它会将它们设置在全局范围内。这可能有效，但可能会导致冲突，通常可以避免。使用var之类的var i = $(this);，它会将该变量仅保留在click()函数的范围内。
使用jQuery时，您应该将代码包装在$(document).ready()回调中。这将确保在jQuery尝试绑定任何事件处理程序（例如您的单击处理程序）之前加载DOM。

修复此处提到的问题后，javascript代码最终会显示为：

$(document).ready(function() { // ensure document is loaded before running code
    $('#menu ul li').click(function() {

        // set all other elements to their own data-info attribute value
        $('#menu ul li').not(this).each(function() {
            var info = $(this).data('info');
            $(this).html(info);
        });

        // set the clicked item to 'Something unique'
        $(this).html('Something unique');        
    });
});

查看this JSFiddle上的工作代码。

jQuery - 在单击时将类的出现设置为各自的数据

2 个答案: