jquery를 사용하여 요소를 선택 가능하게 만드는 방법

사용자가 목록 항목을 클릭 할 때 선택하려고합니다. 하지만 jQuery UI를 선택해서 사용하고 싶지는 않습니다. 내 웹 사이트의 요소 (리 만)를 Windows 탐색기 에서처럼 선택할 수 있도록 코드를 업데이트하십시오. 여기 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

을 원하는대로

$('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를 선택한 후, 선택은 제거됩니다. 코드가 원하는대로 작동하는 것처럼 보입니다. – Barmar

당신은 ur 코드가 저와 잘 작동한다는 것을 알고 있습니다. –

http://java-photo.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse http://stackoverflow.com/questions/ 4012785/jquery-there-there-a-way-to-the-way-the-click-on-it에서 텍스트의 강조 표시 rq = 1 위의 두 링크를 찾으면 도움이 될 것입니다. . –

여기

DEMO HERE

사용 e.stopPropagation() 간다; 당신이 당신의 질문이 무엇인지 확실하지

출처

2013-07-19 06:06:03 anu

감사합니다. @anu, 작동합니다. Shift 키를 사용하여 여러 개의 lis를 선택하면 Windows 탐색기에서 여러 파일을 선택하는 것처럼 코드를 향상시킬 수 있습니까? –

어때 [이 바이올린] (http://jsfiddle.net/6JTk2/4/)? – anu

죄송하지만 작동하지 않는 것 같습니다. 다시 확인하십시오. –

jquery를 사용하여 요소를 선택 가능하게 만드는 방법

답변

관련 문제