如何对相同的元素绑定同样事件且互相不会收到影响？

$(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端 选中的效果-移动端