jquery - Change one DIVs Color on several -


I'm trying to change a divs background color by clicking on one of the images, the second part of the new DIV color image ID should be there.

CSS
  #box {width: 200px; Height: 200 pixels; Background color: # 3f5d5; }. Black {background-color: # 000000! Important; } .red {background-color: # 990000! Important; } .blue {background-color: # 990000! Important; } .Green {background-color: # 990000! Important; }   

html
  & lt; Div id = "box" & gt; To change BGCOLOR & lt; / Div & gt; & Lt; Br / & gt; & Lt; Img id = "color black" src = "picture / black png" alt = "" /> & Lt; Img id = "color red" src = "picture / red" "alt =" "/> & lt; img id =" blue to color "src =" picture / blue.png "alt =" "/>  

Your ID values ​​are not valid. Use the data attributes to store "meta data" (such as color names or hex value etc):

Example: < / P>

     

Then simplifies something like code:

  $ ('img.color'). Click (function () {$ ('# box') .removeClass ("Black Red Blue Green") AddClass ($ (this). Data ('color'));});   

It is usually better to use the class for style (as you did, though if you are changing colors only then you can simplify the code and throw the styles: < ("Background color": $ (this). Data ('color')};});

Note: the data attribute approach means that you have any color value (Even heck Color): eg.

  & lt; Img class = "color" data-color = "# 123456" src = "image / blah.png" alt = "" /> gt;    

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -