Как стиль DIV, когда идентификатор включает строки в php?
Как использовать CSS или jQuery для стилизации моего цвета фона в DIV, когда идентификатор включает строки в php?
Мой код:
<div id='result_'.$item_id.'>item</div>
Решение
Вы можете прикрепить класс к вашему div и использовать селектор jquery, чтобы получить ваш div (по id или классу) и изменить его свойства 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 = «бла»).
А также [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>