关于JQ或者JS选择两个A然后获取A的不同值和ID
html代码如下：<divclass="form-itemclearfix"><labelfor="">推荐标签：</label><spanclass="option-h...
html代码如下：
<div class="form-item clearfix">
<label for="">推荐标签：</label>
<span class="option-hint">最多可选2个</span>
<div class="option-tag">
<a data-id="1" href="javascript:;"class="on" >音乐</a>
<a data-id="3" href="javascript:;" class="on" >动漫</a>
<a data-id="4" href="javascript:;">演出</a>
<a data-id="5" href="javascript:;">活动</a>
<a data-id="8" href="javascript:;">粉丝</a>
<a data-id="7" href="javascript:;">周边</a>
<a data-id="9" href="javascript:;">舞台剧</a>
</div>
</div>
假如点击一个A、动漫，就会给一个class="on"，并且a样式是选中，当我再点击a、演出
同样给一个class="on"，并且a样式也选中。条件，如果只选一个A（就是点击只有一个A）就返回A的值（如音乐）和data-id（1），但是如果选中两个A，也就是选中两个A的class="on"都有，同时获取到数组 3=>动漫，4=>演出，之后只能取消之前选中的两个或者一个，最多也就能选中2个。求问，怎样用JQ或者JS获取到选中的两个的值和 data-id，或者只选中一个的值和 data-id呢？？？？
选中后样式如下，只求JQ或者JS获取到选中两个或者选中其中一个的值和data-id 展开
<div class="form-item clearfix">
<label for="">推荐标签：</label>
<span class="option-hint">最多可选2个</span>
<div class="option-tag">
<a data-id="1" href="javascript:;"class="on" >音乐</a>
<a data-id="3" href="javascript:;" class="on" >动漫</a>
<a data-id="4" href="javascript:;">演出</a>
<a data-id="5" href="javascript:;">活动</a>
<a data-id="8" href="javascript:;">粉丝</a>
<a data-id="7" href="javascript:;">周边</a>
<a data-id="9" href="javascript:;">舞台剧</a>
</div>
</div>
假如点击一个A、动漫，就会给一个class="on"，并且a样式是选中，当我再点击a、演出
同样给一个class="on"，并且a样式也选中。条件，如果只选一个A（就是点击只有一个A）就返回A的值（如音乐）和data-id（1），但是如果选中两个A，也就是选中两个A的class="on"都有，同时获取到数组 3=>动漫，4=>演出，之后只能取消之前选中的两个或者一个，最多也就能选中2个。求问，怎样用JQ或者JS获取到选中的两个的值和 data-id，或者只选中一个的值和 data-id呢？？？？
选中后样式如下，只求JQ或者JS获取到选中两个或者选中其中一个的值和data-id 展开
4个回答
展开全部
你的问题描述不清楚啊， 具体的操作都到底是什么你说清楚点，
什么同时获取到数组 3=>动漫，4=>演出， 这句话什么意思？
之后只能取消之前选中的两个或者一个，最多也就能选中2个？这具体想要怎么样的效果？
都描述不清楚 怎么帮你写呢？
还是写了个demo 样式就没写了， 你看是不是你需要的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.on{
font-weight: bold;
color: red;
}
</style>
<script src="easyui/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var selector = ".option-tag a";
$(selector).on("click", function(){
var $this = $(this);
var selectNum = $(selector).filter(".on").length;//当前选中了几个
console.info("selectNum=" + selectNum);
//当选中的少于2个的时候 继续选中或取消选择
if(selectNum < 2) {
if(!$this.hasClass("on")){
$this.addClass("on");
}else {
$this.removeClass("on");
}
//已经选中2 个 并且选中的是其中的一个 则取消选中
}else if(selectNum==2 &&$this.hasClass("on")) {
$this.removeClass("on");
}
//打印出选中的 可自行操作
console.info("当前选中的:")
$(selector).filter(".on").each(function(){
console.info(" id=" + $(this).data("id") + " name=" + $(this).text());
});
});
});
</script>
</head>
<body>
<div class="form-item clearfix">
<label for="">推荐标签：</label>
<span class="option-hint">最多可选2个</span>
<div class="option-tag">
<a data-id="1" href="javascript:;"class="on" >音乐</a>
<a data-id="3" href="javascript:;" class="on" >动漫</a>
<a data-id="4" href="javascript:;">演出</a>
<a data-id="5" href="javascript:;">活动</a>
<a data-id="8" href="javascript:;">粉丝</a>
<a data-id="7" href="javascript:;">周边</a>
<a data-id="9" href="javascript:;">舞台剧</a>
</div>
</div>
</body>
</html>
追问
你看图片。就是可以选择两个，怎样按顺序获取到选择的值和ID
追答
我写了demo啊 你复制下去试一下，jquery 自己按位置重新引入
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(document).ready(function(){
$('.option-tag a').click(function(){
var flag = false; //是否为取消标签操作
if($(this).hasClass('on')){
$(this).removeClass('on');
flag = true;
}
var res = [];
var tags = $('.option-tag .on');
$(tags).each(function(){
res[$(this).attr('data-id')] = $(this).text();
});
if(tags.length<2 && !flag){
$(this).addClass('on');
res[$(this).attr('data-id')] = $(this).text();
}
console.log(res);
})
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
直接上jquery代码了，放进去运行就可以
$('a').click(function(){
if(klasson.length<2&&this.className!='on'){
$(this).addClass('on');
alert($(this).html())
alert($(this).attr('data-id'))
}else if(this.className='on'){
$(this).removeClass('on')
}
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我就能帮你到这了！
function select(obj){
if($(obj).hasClass("on")){
$(obj).removeClass("on");
}else{
if($("a[class='on']").size()<2){
$(obj).addClass("on");
}
}
var dataid = $(obj).attr("data-id");
var textstr = $(obj).text();
alert("data-id值："+dataid+" ；文字内容为:"+textstr);
}
<div class="form-item clearfix">
<label for="">推荐标签：</label>
<span class="option-hint">最多可选2个</span>
<div class="option-tag">
<a data-id="1" onclick="select(this)" href="javascript:;"class="on" >音乐</a>
<a data-id="3" onclick="select(this)" href="javascript:;" class="on" >动漫</a>
<a data-id="4" onclick="select(this)" href="javascript:;">演出</a>
<a data-id="5" onclick="select(this)" href="javascript:;">活动</a>
<a data-id="8" onclick="select(this)" href="javascript:;">粉丝</a>
<a data-id="7" onclick="select(this)" href="javascript:;">周边</a>
<a data-id="9" onclick="select(this)" href="javascript:;">舞台剧</a>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
