Получение метки «это» в jQuery

Question

Ниже приведен мой код для изменения цвета метки поля ввода в фокусе:

    $(document).ready(function() {

var name = $(this).attr("name");

$(".comm-input").focus(function() {
    $("label[for=name]").css({"color" :"#669900"});
}); 

$(".comm-input").blur(function() {
    $("label[for=name]").css({"color" :"#999999"});
});     

});

.comm-input - это класс ввода. Любые идеи о том, почему это не работает ?? Спасибо!

Answer 1

У вас есть пара вопросов.

Во-первых, вы определяете name в ready(). Там не будет никакого (уместного) значения. Правильное место для поиска внутри ваших обработчиков событий.

Во-вторых, вы не подставляете значение имени, вы используете буквальное имя. Вы хотите:

$(function() {
  $(".comm-input").focus(function() {
    $("label[for" + this.name + "]").css({"color" :"#669900"});
  }).blur(function() {
    $("label[for=" + this.name + "]").css({"color" :"#999999"});
  }); 
});

Наконец, я настоятельно рекомендую использовать класс CSS вместо прямой установки атрибутов стиля CSS. Их проблематично удалить. Например, что, если нормальный цвет зеленый? Ваш код установит его на что-то другое, чего не было, но удаление класса установит его правильно, поэтому CSS:

label.highlight { color: #690; }

с:

$(function() {
  $(".comm-input").focus(function() {
    $("label[for" + this.name + "]").addClass("highlight");
  }).blur(function() {
    $("label[for=" + this.name + "]").removeClass("highlight");
  }); 
});

Answer 2

Вам нужно изменить свой селектор на это:

$(".comm-input").focus(function() {
     $("label[for=" + this.name + "]")).css("color", "#669900");
});     

Он не будет автоматически изменять строковый литерал "name" со значением вашей переменной name.

Кроме того, когда вы захватывали переменную имени, this относится к документу, а не к фокусируемому элементу.