Подсветка элементов с помощью jQuery « Марк и Марта.Ру. Записки отца-программиста

Подсветка элементов с помощью jQuery

Довольно распространенная задача – подсвечивать элементы формы. Например, при проверке на корректность заполнения очень неплохо подсветить их и перевести фокус на пропущенные элементы.

Чаще всего для подсветки я выделяю border у элементов как правило красным цветом. Для реализации использую jQuery и классы CSS, если ест такая возможность. Потому тут опишу 2 метода.

1й метод. С помощью класса CSS

Для реализации метода создаю класс .red:

        .red {
            border: #f00 1px solid;
        }

.red {

border: #f00 1px solid;

}

С помощью JavaScript добавляю код для добавления класса к элементу. Для примера буду использовать добавление класса и его удаление при нажатии кнопки с ID 'colorizeBtn':

$(document).ready(function () {

  var clicked = 0;
  $('#colorizeBtn').click(function() {

    if(clicked%2 == 0) {
        $('input').addClass('red');
    }
    else {
        $('input').removeClass('red');
    }
    clicked++;
  });
});

$(document).ready(function () {

var clicked = 0;

$('#colorizeBtn').click(function() {

if(clicked%2 == 0) {

$('input').addClass('red');

}

else {

$('input').removeClass('red');

}

clicked++;

});

2й метод. С помощью добавления стилей CSS

Этот метод рекомендую использовать только тогда, когда нет возможности подключить CSS класс.

$(document).ready(function () {

  var clicked = 0;
  $('#colorizeBtn').click(function() {

    if(clicked%2 == 0) {
        $('input').css( {
            'border-color': '#f00',
            'border-width' : '1px',
            'border-style' : 'solid'
        });
    }
    else {
        $('input').css( {
            'border-color': '#000',
            'border-width' : '1px',
            'border-style' : 'solid'
        });        
    }
        clicked++;
  });
});

$(document).ready(function () {

var clicked = 0;

$('#colorizeBtn').click(function() {

if(clicked%2 == 0) {

$('input').css( {

'border-color': '#f00',

'border-width' : '1px',

'border-style' : 'solid'

});

}

else {

$('input').css( {

'border-color': '#000',

'border-width' : '1px',

'border-style' : 'solid'

});

}

clicked++;

});

Очевидный минус этого метода – нельзя вернуться к первоначальному состоянию элемента, можно только добавить стиль, такой же как у первоначального состояния. Но если спустя какое-то время изменить основной CSS файл, то про этот обработчик вы скорей всего не вспомните. Потому этот метод использовать не рекомендую.

Tвитнуть