当 id 在 php 中包含字符串时如何设置 DIV 样式？

Question

当 id 在 php 中包含字符串时，如何使用 CSS 或 jQuery 在 DIV 中设置我的背景颜色样式？

我的代码是：

<div id='result_'.$item_id.'>item</div>

Answer 1

您可以将 class 附加到您的 div 并使用 jquery 选择器获取您的 div（通过 id 或 class）并更改它的 css 属性使用 .css()。此外，我认为您想在单击特定 div 后更改背景，因此您还需要附加一个单击处理程序，提取其 ID，然后更改其背景颜色。

<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')   
    })

Answer 2

如果您可以将 class 添加到 div，则可以使用 css:

设置样式

<div class="my-class" id='result_'.$item_id.'>item</div>

css:

.my-class {
    background-color: red;
}

或者如果你想用 .wrapper 包裹你的 div，你的 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");
});

Answer 3

您可以在属性 id 上使用属性选择器！

[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>

当 id 在 php 中包含字符串时如何设置 DIV 样式？

How style DIV when the id inclue strings in php?

php

jquery

css

jquery-click-event

编辑