0

How to use CSS or jQuery to style my background-color in DIV when the id inclue strings in php?

My code is:

<div id='result_'.$item_id.'>item</div>
levi
  • 22,001
  • 7
  • 73
  • 74
conan
  • 1,327
  • 1
  • 12
  • 27
  • do you want to change background if $item_id != ''? – Luca Olivieri Feb 16 '15 at 17:30
  • I want to change it $item_id=something. Just like facebook, I believe their
    will have a id like id=style'.$user_id.'> So how can they style it when they have different user. Because I cannot say result_'.$item_id.' in my css sheet, because it won't take $item_id. Thanks for your time
     – conan Feb 16 '15 at 17:58

3 Answers3

2

You can attach a class to your div and use a jquery selector to get your div(by id or class) and change its css properties using .css(). Also I think you want to change the background after clicking on a specific div, so you need to attach also a click handler, extract its id and then change its background color. 

<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')   
    })
levi
  • 22,001
  • 7
  • 73
  • 74
  • thanks for your response. But the item_id number will be varied base on the item, if I have hundred thousands items, what I can do. I cannot type #result_2, #result_3....... – conan Feb 16 '15 at 17:36
  • @conan ok, but that is up to you, when do you want to change the background ? based on what ? – levi Feb 16 '15 at 17:37
  • do you want to change all div backgrounds ? or just odd ones ? or what? – levi Feb 16 '15 at 17:38
  • Maybe I should not use
    , I should use or something else. i allow different user to enter item, and I allow user to delete them, that's why I need to a different id for different item, that is why I put the $item_id into
    , so whenever the user click that item, it only response to that specific id, but I don't know how to style a div when it has $, thanks for your time
     – conan Feb 16 '15 at 17:43
  • @conan so, do you want to change background div color when the user click on it? – levi Feb 16 '15 at 17:47
  • yes, but base on different item. If I clicked on item1, item1 change, if I clicked on item2, only itme2 change. But I have thousand items, that's why I add $item_id into a div. so $time_id will change base on the situation I command – conan Feb 16 '15 at 17:54
  • @conan check again my answer. – levi Feb 16 '15 at 17:59
  • @conan you can set it as correct answer, clicking over the check mark. – levi Feb 16 '15 at 18:13
  • @levi Couldn't you just add a simple class to the clicked element like I have in my example? – Jack Feb 16 '15 at 18:14
2

If you can just add a class to your div, you can style it with css:

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

css:

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

Or if you want to wrap your divs with a .wrapper, your css could be something like:

.wrapper > div {
    background-color: red;
}

edit

I can see from your other comments that you are asking about the background-color changing when you click on the div. Although that was not made clear in your question, you could do that like this: (Building on my previous example)

.my-class.active {
    background-color: blue;
}

Add some jquery:

$(".my-class").click(function(){
    $(this).siblings(".active").removeClass("active"); // Maybe you could use .end() to keep the chain going
    $(this).addClass("active");
});
Jack
  • 2,741
  • 2
  • 24
  • 32
  • Thanks for your time. You works what I ask for. Your way is simple and great. But, when I combine with my others codes, I think levi's way is suit me. – conan Feb 16 '15 at 19:47
0

You can use the attribute selector on the attribute id !

[id] matches every element with attribute "id".

[id=blah] is an equivalent to the selector #blah (every element with id="blah").

And [id^=blah] matches every element whose "id" attribute begins with 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>
Aghaa
  • 36
  • 3