从多维数组输出的数据属性选择器
Data attribute selector to output from multidimensional array
这是我发布的第一个问题,如果格式错误,请道歉。
下面是我的代码: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,这是工作良好。我遇到的问题是,我想拥有它,所以如果用户选择"第一"answers"第二"它输出这两个数组,但它只是选择"第一"数组。它是我需要使用的每个函数来实现这一点吗?
希望我已经解释得够清楚了。
谢谢你的帮助。
谢谢
我已经对你的代码做了一些修改,现在它将显示你所选择的所有项目。
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>
$(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>
您可以使用另一个数组来存储选定的数据:-
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>
试试这个,我已经编辑了一点我们的代码工作良好
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>
相关文章:
- jQuery最近父级的数据属性选择器
- 如何为HTML属性/选择器创建全局名称空间或变量
- 属性选择器不起作用(语法错误、无法识别的表达式)
- 为什么属性选择器不适用于jQuery
- JQuery中的CSS属性选择器
- Jquery $this属性选择器是否包含单词
- 使用 *= 的 jQuery 属性选择器
- jQuery - Raphael - SVG - 基于自定义数据的选择器
- 如何在jQuery中定义条件属性选择器
- 不区分大小写的 jQuery 属性选择器
- jQuery 查找不适用于属性选择器
- IE中的jQuery属性选择器
- 从属性选择器中提取值
- j查询 ID 属性选择器
- 使用本地存储值作为属性选择器
- 按数据属性选择(JQuery)
- 任务不可能:jQuery属性选择器
- 互斥数据属性选择器
- 从多维数组输出的数据属性选择器
- JQuery数据属性选择器未定义