javascript - Manipulating CSS with JQuery -
This might be the first question ..
I'm trying to create a shopping list app Allow me to remove items as well as check the item and un-check I have & lt; Li & gt;
with id = "list"
. I have a button with and
class = "remove"
(so when I click on it, it will remove the entire list) ... So far I have done this work, when I click the word gray rotate how do I target it when I uncheck the checkbox it goes back to normal?
Note: I am using an input type check-box instead of a button. ($ (This). CSS ("color", "gray"); $ (".remove"). CSS (
$ ('# list'). "Background color", "Gray");}); });
This is HTML:
& lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; My awesome shopping list & lt; / Title & gt; & Lt; Link rel = "stylesheet" href = "css / style.css" & gt; & Lt; Script src = "http://code.jquery.com/jquery-latest.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "js / app.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Section class = "app-container" & gt; & Lt; Div class = "top-nav" & gt; & Lt; H1 & gt; My awesome shopping list & lt; / H1> & Lt; Input type = "text" id = "message" value = "enter item .." & gt; & Lt; Button class = "add-button" type = "button" & gt; Add & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "main-list" & gt; & Lt; Div class = "top-label" & gt; & Lt; H2 & gt; The item's & lt; / H2 & gt; & Lt; H2 & gt; Price & lt; / H2 & gt; & Lt; H2 & gt; Amount & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div id = "message" & gt; & Lt; Ul class = "item" & gt; & Lt; Li id = "list" & gt; Input type = "checkbox" id = "check" & gt; Item A & lt; Input type = "text" class = "value" value = "" & gt; & Lt; Input type = "text" class = "zodiac" value = "" & gt; & Lt; Button type = "button" class = "delete" & gt; X & lt; / Button & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "total container" & gt; & Lt; H3 & gt; Total & lt; / H3 & gt; & Lt; Input type = "text" value = "" & gt; & Lt; / Div & gt; & Lt; / Section & gt; & Lt; / Body & gt; & Lt; / Html & gt;
I have a link to the online project
.toggleClass ( ) And define two classes with CSS defined
$ ("#list"). Click (function () {$ (this) .toggleClass ("class1", "class2");});
Comments
Post a Comment