Вопрос по javascript, dom-manipulation, jquery – Как выделить выделенный элемент списка с помощью jquery?

6

У меня есть несколько элементов в списке, и я хочу выделить тот, на котором пользователь щелкает, применяя некоторый стиль CSS, возможно, цвет фона и т. Д.

Мой HTML выглядит так:

<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>

jВопрос получить выбранный элемент:

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

    ???

})

Ваш Ответ

4   ответа
1

не нуженактивный бытьстойкий вот способ 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.

в некоторых ситуациях может быть полезно упомянутое выше - выделить только элемент, активный в данный момент ...

1

Твой ??? было бы:

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

Тогда все, что вам нужно сделать, это определить ваш «выбранный» класс CSS.

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

sметоды управления классами (а именноaddClass() а такжеremoveClass() в этом случае) добавить класс к выбранному элементу и удалить тот же класс из всех других элементов (если вы хотите, чтобы за один раз был выбран только один).

//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);
});

Тогда в вашем CSS просто добавьте:

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

jsFiddle Demo

Это лучшее решение, чем изменение свойств CSS напрямую из jQuery / Javascript (с.css() метод, например), потому что разделение задач сделает ваш код более управляемым и читабельным.

Отлично, спасибо за информацию. Я всегда учусь на этом сайте :) Paul
Я никогда не видел подобного синтаксиса, присваивающего переменную функции ... (например, $ thumbs =) Paul
@htiru Тогда не используйте его на странице навигации. Используйте его на предметы, которые вам нужно выделить. kapa
с использованием e.preventDefault (); это останавливает навигацию по страницам для меня ?? любое другое решение @kapa thiru
@Paul Я добавил несколько комментариев, чтобы объяснить этот шаг.$thumbs будет в основном содержать результат$('.thumbnail')потому что в jQuery большинство методов будет возвращать коллекцию jQuery, чтобы разрешить цепочку. Я сделал это, потому что тогда внутри обработчика кликов, мне не нужно снова запрашивать DOM для.thumbnail элементы, у меня уже есть. Если элементы меняются (я имею в виду добавленные / удаленные), поэтому они не статичны, этот метод не должен использоваться, вам следует снова запросить DOM. kapa

Похожие вопросы