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

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，这是工作良好。我遇到的问题是，我想拥有它，所以如果用户选择"第一"one_answers"第二"它输出这两个数组，但它只是选择"第一"数组。它是我需要使用的每个函数来实现这一点吗?

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

谢谢你的帮助。

谢谢

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>