jquery点击一个li再点击另外一个li时,两个li之间的所有li都给一个className，而且只触发一次

这样的效果改怎么写啊，求教大神，兼容手机端即可<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul
</div>

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <style type="text/css">
    li {
    border: 1px solid #999;
    }
    li.select {
    background-color: #F99;
    }
    </style>
    </head>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <body>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <script type="text/javascript">
    $(function(){
    var index = -1;
    var li = $("li");
    li.click(function(event){
    if (index==null) return;
    if (index==-1) {
    index = $(this).index();
    } else {
    var i = $(this).index();
    var lis = i>index ? li.slice(index,i+1) :li.slice(i,index+1);
    lis.addClass("select");
    index = null;
    }
    });
    });
    </script>
    </body>
    </html>
      

  2.   

    <div>
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.4.2/jquery.min.js"></script>
    <style>.mid{background:#f00}</style>
    <script>
        var start,end
        $('li').click(function () {
            if (start == undefined) start = $(this).index();
            else {
                end = $(this).index();
                if (start > end) { var s = end; end = start; start = s; }
                console.log(start,end)
                $('li').unbind('click').filter(':lt(' + (end ) + ')').filter(':gt(' + start + ')').addClass('mid')        }
        })
    </script>