1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

problem with selector

Discussion in 'jQuery' started by ssimon171078, May 27, 2015.

0
  1. #1
    i wrote this script ,i have problem to use jquery to change background color of "controller light":
    <div id="room_1" class="room big-room">
    <div id="ctrl_1" class="controller light"></div>
    <div id="ctrl_2" class="controller ac"></div>
    </div>
    my code :

    <!DOCTYPE HTML>
<html>
    <head>
        <link rel = "stylesheet" href = "css/style.css"/>
        <script src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src = "smart_office.js"></script>
    </head>
    <body>
        <div id="container">
            <h1>Smart Office</h1>
            <section id="room-numbers">
                <div id="room_num_1" class="room_num room_num_left">1</div>
                <div id="room_num_2" class="room_num room_num_left">2</div>
                <div id="room_num_3" class="room_num room_num_right">3</div>
                <div id="room_num_4" class="room_num room_num_right">4</div>
                <div id="room_num_5" class="room_num room_num_right">5</div>
            </section>
            <section id="office">
                <section id="left-part">
                    <div id="room_1" class="room big-room">
                        <div id="ctrl_1" class="controller light"></div>
                        <div id="ctrl_2" class="controller ac"></div>
                    </div>
                    <div id="room_2" class="room big-room">
                        <div id="ctrl_3" class="controller light"></div>
                        <div id="ctrl_4" class="controller ac"></div>
                    </div>
                </section>
                <section id="right-part">
                    <div id="room_3" class="room small-room">
                        <div id="ctrl_5" class="controller light on"></div>
                        <div id="ctrl_6" class="controller ac on"></div>
                    </div>
                    <div id="room_4" class="room small-room">
                        <div id="ctrl_7" class="controller light on"></div>
                        <div id="ctrl_8" class="controller ac on"></div>
                    </div>
                    <div id="room_5" class="room small-room">
                        <div id="ctrl_9" class="controller light"></div>
                        <div id="ctrl_10" class="controller ac"></div>
                    </div>
                </section>
            </section>
           
            <section id="report_results">
                <div class="report_results_part">
                    <h2>No Electricity Usage:</h2>
                    <div id="rooms_no_electricity" class="extra_report">
                        Rooms not using electricity right now: <span>???</span>
                    </div>
                </div>
           
            </section>
        </div>
    </body>
</html>
    Code (JavaScript):

     
    ssimon171078, May 27, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    You didn't include any javascript, but how are you planning on changing these colors? By clicking on the div?
    If you are, the code would be something like this (I also see you have an "on" class on some, so maybe that's what you're trying to do?)
    
$('.controller_light').click(function() {
  $(this).toggleClass('on');
});
    Code (markup):
    That would be one way to do it.

    EDIT: Sorry, I assumed you had some logic in your HTML - which you don't. Why do you have a list of rooms with no content (of course these won't do anything, they're invisible)
    What exactly are you trying to do?
    It seems to me you have 5 rooms, all with either lights on/off, and AC on/off - why don't you make this proper HTML (ie, a form) and change based on the status? You can have sliders to make the whole thing look sleeker, if you want, but basically, what you would have is two checkboxes for each room, one for light, one for AC, and then change the look of the room div based on what is checked.
     
    Last edited: May 27, 2015
    PoPSiCLe, May 27, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Which done properly would let you in modern browsers not even need JS involved in the process -- just use :checked in the CSS.

    Stunning example of what I mean by using JS to do CSS' job in modern browsers; and if you need legacy support THEN dive for the scripttardery.
     
    deathshadow, Jun 4, 2015 IP