$(document).ready(function () {
var result = []; //定义一个空数组
var oDiv = document.getElementsByClassName("node"); //获取相同元素块最外层的class集合
for (var i = 0; i <oDiv.length; i++) { //遍历
(function (i) {
$('#text-' + i).bind('click', function () { //给每一个相同的元素设置click事件
if ($(this).attr("class") == 'section6-text weixuan') { //选中时元素的样式
$('#duihao-' + i).css('backgroundColor', '#3697e9');
$('#text-' + i).find('.text-middle').css('backgroundColor', '#fff'); //text-i,即写死的id，text-0,text-1...
$('#text-' + i).find('.htitle').css('backgroundColor', '#fff');
$(this).removeClass('weixuan');
result[i] = $('#text-' + i).find("h6").html(); //如果选中，获取元素中的值，存到数组中
} else { //未选中或者选中又取消时，元素的样式
$('#duihao-' + i).css('backgroundColor', '');
$('#text-' + i).find('.text-middle').css('backgroundColor', '');
$('#text-' + i).find('.htitle').css('backgroundColor', '');
$(this).addClass('weixuan');
result[i] = ""; //如果元素没被选中，存到数组为“ "" ”
}
e.stopPropagation(); //阻止事件冒泡
});
})(i)
}
});
我们还需要一个提交按钮，来提交选中的元素内容，设定一个提交按钮
$('.submit').on('click', function () {
//在提交时，我们需要判断result[]数组是否为空，一般通过数组的长度。
//而上面我们定义的数组本来就有长度，所以不能直接判断result.length == 0；
//这里我把数组toString()转换成了字符串，之后用以个正则表达式匹配所有逗号去掉。
var str = result.toString().replace(/,/g, '');
if (str == null || str == undefined || str == '') { //如果字符串去掉逗号后没内容，及数组为空
$('.message2').css('display', 'block'); //设置提示信息并2秒后自动消失
setTimeout(function () {
$(".message2").css("display", "none");
}, 2000);
} else {
$.grep(result, function (n) {
return $.trim(n).length > 0;
});
$.post("/pc/daiyunying/add", { //提交
"result": result,
"_token": "{{csrf_token()}}"
},
function (data) {
if (data == "success") { //根据返回码进行判断提示不同的信息
$('.message').css('display', 'block');
setTimeout(function () {
$(".message").css("display", "none");
}, 2500);
} else {
$('.bangding').click()
}
});
}
});
来看一下html代码：
<div class="node">
<div class="section6-text weixuan" id="text-10">
<div class="col-md-2 col-sm-3 htitle"><h6>优化运营报告</h6></div>
<div class="col-md-9 col-sm-8 text-middle">
<div class="p">根据内容运维数据、用户行为数据、模块应用数据给出优化运营建议</div>
</div>
<div class="col-md-1 col-sm-1 p duihao" id="duihao-10">
<div><span class="glyphicon glyphicon glyphicon-ok xuanzhong" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
html代码都是这样重复的，主要用在不是从后台取数据，前台写死的服务，让用户根据自己的需求去选择。
样式部分这里不做详细的讲解，可以给据设计去自己写，大概效果如下：
鼠标移上去的效果
选中的效果-PC端
选中的效果-移动端
