Как изменить одно изменение элемента, не затрагивая другие элементы с тем же классом?

<div>text</div>
<div>other text</div>

В основном я пытаюсь сделать "текст" красным цветом при нажатии, если $('.hello').hasClass('.1') не делая "другой текст" красным.

3 ответа

Просто выберите оба класса:

$(".hello.1").css("color", "red");

Обратите внимание, что селектор не имеет пробела перед второй точкой - если бы он делал это, он искал бы элементы со вторым классом, которые являются потомками элементов с первым.

Или, если вы говорите, когда щелкнут элемент "привет", вы хотите, чтобы этот элемент был красным, только если он имеет класс "1", то:

$("hello").click(function() {
 var $this = $(this);
 if ($this.hasClass("1"))
 $this.css("color", "red");
});


это также будет работать:

$('.1').css('color', 'red');

но, как я уверен, вы знаете,

'1' - ужасное имя класса

$(function() {
 $('.hello').on('click', function() {
 $('.hello:eq(0)').css('color', 'red');

 $('.hello:first').css('color', 'red');

 $('.hello:first-child').css('color', 'red');

 $('.hello:not(:gt(0))').css('color', 'red');

 $('.hello:not(:last)').css('color', 'red');

 $('.hello:not(:not(:not(:not(.1)))):not(.2)').css('color', 'red');
 });
});

или для переключения красного цвета:

CSS

.reddy-freddy {
 color: red;
}

JS

$('.hello:first').click(function(){$(this).toggleClass('reddy-freddy')});


CSS

.helloRed {
 color: red;
 }

JS:

$(".hello.1").addClass('helloRed');
$(".hello.1").removeClass('helloRed');

licensed under cc by-sa 3.0 with attribution.