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>

所以First，Second和Third是我的类别，如果你选择“First”我希望它输出我的html中的第一个数组，这是正常的。我遇到的问题是我想拥有它，如果用户选择“First”和“Second”它会输出这两个数组，但它只选择“First”数组。这是我需要用来实现这个目标的每个功能吗？

希望我已经解释得这么好了。

感谢您的帮助。

由于

Answer 1

$(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 2

试试这个，我编辑了一些你的代码才能正常工作

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>

Answer 3

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

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 4

您可以再使用一个阵列来存储选定的数据： -

＆＃13;

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());
});

＆＃13;

.active {
  color: red;
}

＆＃13;

<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>

＆＃13;

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

4 个答案: