Làm cách nào để đánh dấu một mục danh sách được chọn bằng jquery?

Question

Tôi có một vài mục trong một danh sách và muốn nhấn mạnh một trong những người dùng nhấp vào bằng cách áp dụng một số phong cách css, có thể là một màu nền, vv

HTML của tôi trông như thế này:

<ul class="thumbnails"> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb1.jpg' alt=""> 
      <span class="gifttitle">Thumb1</span> 
     </a>  
    </li> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb2.jpg' alt=""> 
      <span class="gifttitle">Thumb3</span> 
     </a>  
    </li> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb3.jpg' alt=""> 
      <span class="gifttitle">Thumb3</span> 
     </a>  
    </li> 
</ul> 

jQuery để lấy mục đã chọn:

$('.thumbnail').click(function(e) { 
    e.preventDefault(); 

    ??? 

}) 

Answer 1

Bạn có thể sử dụng jQuery class management methods (cụ thể là addClass() và removeClass() trong trường hợp này) để thêm một lớp về mục đã chọn và loại bỏ các lớp tương tự từ tất cả các mặt hàng khác (nếu bạn muốn chỉ có một lựa chọn tại một thời điểm).

//save class name so it can be reused easily 
//if I want to change it, I have to change it one place 
var classHighlight = 'highlight'; 

//.click() will return the result of $('.thumbnail') 
//I save it for future reference so I don't have to query the DOM again 
var $thumbs = $('.thumbnail').click(function(e) { 
    e.preventDefault(); 
    //run removeClass on every element 
    //if the elements are not static, you might want to rerun $('.thumbnail') 
    //instead of the saved $thumbs 
    $thumbs.removeClass(classHighlight); 
    //add the class to the currently clicked element (this) 
    $(this).addClass(classHighlight); 
}); 

Sau đó, trong CSS của bạn chỉ cần thêm:

.highlight { 
    background-color: cyan; 
    font-weight: bold; 
} 

jsFiddle Demo

Đây là một giải pháp tốt hơn so với thay đổi thuộc tính CSS trực tiếp từ jQuery/Javascript (với phương pháp .css() chẳng hạn), vì tách mối quan tâm sẽ làm cho mã của bạn dễ quản lý và dễ đọc hơn.

Answer 2

$('.thumbnail').click(function(e) { 
    e.preventDefault(); 
    $(this).css('background-color', 'red'); 
}) 

Answer 3

??? bạn sẽ là:

$('.thumbnail').removeClass('selected'); 
$(this).addClass('selected'); 

Sau đó, tất cả những gì bạn phải làm là xác định lớp css 'đã chọn' của bạn.

Answer 4

Nếu bạn không cần hoạt động là dai dẳng đây là một cách CSS:

li:focus{ 
 
    background: red; 
 
} 
 
li:active{ 
 
    background: gold; 
 
}

<ul> 
 
    <li tabindex="1">Item 1</li> 
 
    <li tabindex="1">Item 2</li> 
 
    <li tabindex="1">Item 3</li> 
 
</ul> 
 

 
Now click <b>here</b> and see why it's not persistent.

trong một số tình huống trên có thể có ích - để chỉ đánh dấu mục "hiện hoạt nhấp chuột" hiện tại & hellip;