Как сделать элементы доступными с помощью jquery

Я хочу выбрать элементы списка, когда пользователь нажимает на них. Но я не хочу использовать jQuery ui по выбору. Обновите мои коды, чтобы элементы (только li) на моем веб-сайте могли быть выбраны так же, как в Windows Explorer.Как сделать элементы доступными с помощью jquery

<ol id="browse-files"> 
    <li class="browse-file row"> 
     <div class="span6 file-name-col">timesNew.zip</div> 
     <div class="span2 file-type-col">ZIP file</div> 
     <div class="span2 file-size-col">1.08MB</div> 
     <div class="span2 file-uploaded-col">23//6/2013</div> 
    </li> 
    <li class="browse-file row"> 
     <div class="span6 file-name-col">Photos.zip</div> 
     <div class="span2 file-type-col">ZIP file</div> 
     <div class="span2 file-size-col">30.19MB</div> 
     <div class="span2 file-uploaded-col">23//6/2013</div> 
    </li> 
    <li class="browse-file row"> 
     <div class="span6 file-name-col">Docs.zip</div> 
     <div class="span2 file-type-col">ZIP file</div> 
     <div class="span2 file-size-col">12.38MB</div> 
     <div class="span2 file-uploaded-col">23//6/2013</div> 
    </li> 
    </ol>

Вот CSS

ol#browse-files { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ol#browse-files li { 
    line-height: 40px; 
    border-bottom: solid 1px #dcdcdc; 
} 
ol#browse-files li:hover { 
    background-color: #dff0d8; 
} 
ol#browse-files li.active { 
    background-color: #468847; 
    color: #fff; 
}

И JQuery коды здесь идет

$(document).ready(function() { 
    $('ol#browse-files li').click(function(e) { 
     if(e.ctrlKey){         //Select multiple files with ctrl 
      $(this).toggleClass('active') 
     } 

     else if($(this).hasClass('active')){ 
     $(this).toggleClass('active'); 
     } 

     else { 
     $('ol#browse-files li').removeClass('active'); 
     $(this).addClass('active'); 
     } 
    }); 

    $('.container:not(ol li)').click(function(e) {  // It works well without this but i want to deselect when user click anywhere else. 
     $('ol#browse-files li').removeClass('active'); 
    }); 
});

источник

2013-07-19 Anonymous

Не уверен, что ваш вопрос. Похоже, ваш код делает то, что вы хотите. – Barmar

вы знаете, что коды ур хорошо работают со мной. –

http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse http://stackoverflow.com/questions/ 4012785/jquery-is-there-a-way-to-highlight-the-text-of-a-div-when-you-click-on-it? Rq = 1 Выше двух найденных ссылок, надеюсь, полезно , –

DEMO HERE

Используйте e.stopPropagation(), чтобы остановить барботирования событие щелчка Шифрование до контейнера;

$('ol#browse-files li').click(function (e) { 
     e.stopPropagation(); 
     if (e.ctrlKey) { //Select multiple files with ctrl 
      $(this).toggleClass('active'); 
     } else if ($(this).hasClass('active')) { 
      $(this).toggleClass('active'); 
     } else { 
      $('ol#browse-files li').removeClass('active'); 
      $(this).addClass('active'); 
     } 
}); 

$(".container").not("ol li").click(function (e) { 
     $('ol#browse-files li').removeClass('active'); 
});

Теперь после выбора некоторых li при нажатии на контейнере (серая область), выбор будет удален, как вы хотели

источник

2013-07-19 06:06:03 anu

Спасибо @anu, он работает. Можете ли вы улучшить мой код, чтобы также работать с несколькими клавишами с использованием клавиши shift (так же, как выбор нескольких файлов в проводнике Windows). –

Как насчет [этой скрипки] (http://jsfiddle.net/6JTk2/4/)? – anu

Извините, но он не работает. Повторите попытку. –

Как сделать элементы доступными с помощью jquery

ответ

Смежные вопросы