从多维数组输出的数据属性选择器

Question

这是我发布的第一个问题，如果格式错误，我深表歉意。

这是我的代码：

var words = [ ["first"],["second"],["third"] ];

$('.categories li a').click(function() {
    $('.output').empty();
    $(this).toggleClass('active');
    var myEm = $(this +".active").data('words');
    alert(myEm);
    $('.output').append(words[myEm]);
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li><a data-words="0">First</a></li>
  <li><a data-words="1">Second</a></li>
  <li><a data-words="2">Third</a></li>
</ul>

<div class="output"></div>

所以第一，第二和第三是我的类别，如果您选择“第一”，我希望它输出我的 html 中的第一个数组，这工作正常。我遇到的问题是我想拥有它，所以如果用户选择“First”和“Second”，它会输出这两个数组，但它只选择“First”数组。这是我需要使用的每个函数来实现这一点吗？

希望我已经解释得足够清楚了。

感谢您的帮助。

谢谢

Answer 1

我对您的代码进行了一些更改，现在它将显示您选择的所有项目。

var words = [["first"], ["second"], ["third"]];

            $('.categories li a').click(function () {
                $('.output').empty();
                $(this).toggleClass('active');
                $('.categories li a.active').each(function (index) {
                    var myEm = $(this).data('words');
                    alert(myEm);
                    debugger;
                    if (words[myEm])
                        $('.output').append(words[myEm]);
                }); 
            });

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li><a data-words="0">First</a></li>
  <li><a data-words="1">Second</a></li>
  <li><a data-words="2">Third</a></li>
</ul>

<div class="output"></div>

Answer 2

$(this +".active") 看起来像是一个无效的选择器。

替换为

$(this)

因为无论如何你都想引用当前元素。

此外，您需要先从其他列表元素中删除 active 类，然后再添加到当前/单击的元素。

var words = [ ["first"],["second"],["third"] ];

$('.categories li a').click(function() {
    $('.output').empty();
    $('.categories li a').removeClass('active');
    $(this).addClass('active');
    var myEm = $(this).data('words');
    alert(myEm);
    $('.output').append(words[myEm]);
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li><a data-words="0">First</a></li>
  <li><a data-words="1">Second</a></li>
  <li><a data-words="2">Third</a></li>
</ul>

<div class="output"></div>

Answer 3

你可以多用一个数组来存储选中的数据：-

var words = [ ["first"],["second"],["third"] ];
var selectedwords = [];
$('.categories li a').click(function() {
    $('.output').empty();
    $(this).toggleClass('active');
    var myEm = $(this).data('words');
		if($(this).hasClass('active')){
    	selectedwords.push(words[myEm]);
 		}else{
    	var index = selectedwords.indexOf(words[myEm]);
      selectedwords.splice( index, 1 );
		}
    alert(myEm);
    $('.output').append(selectedwords.toString());
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li><a data-words="0">First</a></li>
  <li><a data-words="1">Second</a></li>
  <li><a data-words="2">Third</a></li>
</ul>

<div class="output"></div>

Answer 4

试试这个，我已经编辑了一些你的代码来正常工作

var words = [ ["first"],["second"],["third"] ];

$('.categories li a').click(function() {
    //$('.output').empty();
    //$(".categories li a").removeClass("active");
    $(this).toggleClass('active');
    var myEm = $(this).attr('data-words');
    alert(myEm);
    $('.output').append(words[myEm]);
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li><a data-words="0">First</a></li>
  <li><a data-words="1">Second</a></li>
  <li><a data-words="2">Third</a></li>
</ul>

<div class="output"></div>