Как использовать CSS или jQuery для стилизации моего цвета фона в DIV, когда идентификатор включает строки в php?
Мой код:
<div id='result_'.$item_id.'>item</div>
Как использовать CSS или jQuery для стилизации моего цвета фона в DIV, когда идентификатор включает строки в php?
Мой код:
<div id='result_'.$item_id.'>item</div>
Вы можете прикрепить класс к своему div и использовать селектор jquery, чтобы получить свой div (по идентификатору или классу) и изменить его свойства css, используя .css()
. Также я думаю, что вы хотите изменить фон после нажатия на определенный div, поэтому вам нужно также прикрепить обработчик кликов, извлечь его идентификатор, а затем изменить цвет фона.
<div class="my_class" id='result_'.$item_id.'>item</div>
$(".my_class").click(function(event){
var clicked_id_item = $(event.target).attr("id").split("_").pop();
$("#result_"+clicked_id_item).css('background-color','black')
})
Если вы можете просто добавить класс в свой div, вы можете стилизовать его с помощью css:
<div class="my-class" id='result_'.$item_id.'>item</div>
CSS:
.my-class {
background-color: red;
}
Или, если вы хотите обернуть свои div .wrapper
, ваш css может выглядеть примерно так:
.wrapper > div {
background-color: red;
}
Из других ваших комментариев я вижу, что вы спрашиваете об изменении цвета фона при нажатии на div. Хотя в вашем вопросе это не было ясно, вы можете сделать это следующим образом: (Основываясь на моем предыдущем примере)
.my-class.active {
background-color: blue;
}
Добавьте немного jquery:
$(".my-class").click(function(){
$(this).siblings(".active").removeClass("active"); // Maybe you could use .end() to keep the chain going
$(this).addClass("active");
});
Вы можете использовать селектор атрибутов для идентификатора атрибута!
[id]
соответствует каждому элементу с атрибутом "id".
[id=blah]
эквивалентен селектору #blah
(каждый элемент с id="blah").
И [id^=blah]
соответствует каждому элементу, чей атрибут "id" начинается с blah.
[id^=result_] {
background: hotpink;
color: #fff;
}
div { margin: .2em; padding: .2em; }
<div id="result_blablah">#result_blablah</div>
<div id="result_hello">#result_hello</div>
<div id="nanana">#nanana</div>
<div class="plop">.plop</div>