change background of next div depending on selected item

Question

EDIT : It seems like I didn't make myself clear, sorry about that, so I update the code.

I have many "select", with different IDs and same class:

    <div class="objvalide">
    <select id="obj1-1" class="swit">
        <option selected="selected" value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <div class="switchy-container">
        <div class="switchy-bar">
            <div class="switchy-slider" draggable="true" style="left: 0px;"></div>
        </div>
    </div>
</div>

<div class="objvalide">
    <select id="obj1-2" class="swit">
        <option selected="selected" value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <div class="switchy-container">
        <div class="switchy-bar">
            <div class="switchy-slider" draggable="true" style="left: 0px;"></div>
        </div>
    </div>
</div>

... and more ...

Here's the JS I have so far:

 $(function() {
    $('.swit').switchy();
    $('.swit').change(function() {

            var select = $(this);
            var id = select.attr('id'); //alert(id); <- Works fine, I get the correct ID
        /* what do I hav to do here in order to have .switchy-bar bg change color only for this particular .objvalide > .switchy-container > .switchy-bar ? */
        });
    });

At the beginning, all options are "0". Each and every .switchy-bar background is white.

When I select option value "1" in obj1-2 for instance, I need the background of its .switchy-bar to be red. If I select option value "2", background of its .switchy-bar has to be green.

The other select and background must remain untouched.

Thanks

`$('.swit').change()` - will only fire when a select **changes** therefore `$(this)` is already the select. (You don't have to do `$(this).each(...)` since it'll only loop once) oh - and we need to see the HTML for `.switchy-bar` too to be able to help :) — SidOfc, Nov 23 '15 at 09:14
Question: `if (select.val() == '0'){` you want to use this for selected? Because that's not for selected. You should `if (select.attr('selected') && select.attr('selected') === 'selected')){` — Joshua Bakker, Nov 23 '15 at 09:17
You are writing $(this).siblings('switchy-bar'). Please write Html for that where you are finding switchy-bar class. — Parth Trivedi, Nov 23 '15 at 09:17
backgroundColor changes using jQuery dynamically for switchy js. You need to make this bg color change after switch change complete. — Parth Trivedi, Nov 23 '15 at 09:25
@Sidney Liebrand: I deleted "$(this).each(function (){ }); and it does the same, so TY for cleaning the code. — OldPadawan, Nov 23 '15 at 09:37
@user3801953 every bit helps, it's all about understanding how things work either way - I just happen to know this :) — SidOfc, Nov 23 '15 at 09:40
@Joshua Bakker: you're right, I tried to use the selected item with this part of the code. I used if (select.attr('selected') && select.attr('selected') === 'selected'){ }but still the same issue, all div are updated with the same color. — OldPadawan, Nov 23 '15 at 09:41
@Parth Trivedi : you say I "need to make this bg color change after switch change complete", but none of the pieces of code I've tried so far won't work :/ I can't figure out how I can achieve this — OldPadawan, Nov 23 '15 at 16:05

score 0 · Answer 1 · answered Nov 23 '15 at 09:46

0

select[0].style.backgroundColor=bgColor

If you want to change the background of selected option,

var a= select[0].selectedIndex;
select[0][a].style.backgroundColor=bgColor

answered Nov 23 '15 at 09:46

soumya sunny

226
1
7

score 0 · Answer 2 · answered Nov 23 '15 at 09:48

Use the click event to fire a function that makes the necessary changes. Use the this selector to ensure your changes only happen on the element that triggered the function.

If you want to make the changes happen to the parent/child (parent in your case) element of the triggering element, you can always traverse the DOM relative to this using JQuery methods this.parent()/this.children(). For instance, if you want to change the background-color of a <select> element based on the clicked <option>, you can do that in the following way using JQuery:

var backgroundcolor = ["red", "green", "white"]; $('option').click(function() { $(this).parent().css("background-color", backgroundcolor[$(this).val()]); });

Here, the array is created in order with the colors corresponding to each option.

score 0 · Accepted Answer · answered Nov 23 '15 at 17:26

0

$('.swit').on('change', function() {

  var myVal = $(this).val();

  switch (myVal){
    case '1': $(this).siblings().children('.switchy-bar').css('background', '#000');
    break
    case '2': $(this).siblings().children('.switchy-bar').css('background', '#f00');
    break
    default: $(this).siblings().children('.switchy-bar').css('background', '#fff'); 
  }

})

http://codepen.io/gmrash/pen/LpoGYG?editors=101

answered Nov 23 '15 at 17:26

gmrash

650
7
15

perfect! thank you so much, helped me really *a lot*. Now, I need to understand why siblings() didn't work earlier with my pieces of code :) I'll let you know if I find, folks – OldPadawan Nov 23 '15 at 18:26

Parth Trivedi · Answer 4 · 2015-11-23T09:42:28.393

-2

Please use addClass("color-1") and removeClass("color-1"). That is the only solution for this and do what do want in that class.

Sol-1 (Without animate background)

In css

.color-1{
//Do stuff 
}

This will Help You.

Also

Sol-2 (With animate background)

 var record= $(this).find('switchy-bar');
    record.animate(
        {backgroundColor: '#FFF'}, 
        {duration: 'fast', complete: function() {
//Here You can animate with new color. and old animation will be overwritten
            record.css('backgroundColor', '');
        }}
    );

edited Nov 23 '15 at 09:42

answered Nov 23 '15 at 09:34

Parth Trivedi

3,802
1
20
40

I disagree strongly with **That is the only solution for this** - there's nothing wrong with adding an inline `background-color` at all and removing it when you don't need it anymore. Tho this is a more **clean** solution. – SidOfc Nov 23 '15 at 09:41
This will not animate background as provided with JS. So inline changing don't make what animation needed. – Parth Trivedi Nov 23 '15 at 09:44
I'm sorry to be an idiot here but *everything* jquery does like animating and such happens with **inline** styles so you're wrong. jQuery is just abstracting it away from you until you view an animating element in devtools – SidOfc Nov 23 '15 at 09:51
Changing color with jQuery and animating color with jQuery both are different things. – Parth Trivedi Nov 23 '15 at 10:07
animating background color performs changing pixels Hex values with different time (fast,slow). – Parth Trivedi Nov 23 '15 at 10:09
I'm not having this discussion with you as it's off-topic, have a good day! – SidOfc Nov 23 '15 at 10:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95904/discussion-between-parth-trivedi-and-sidney-liebrand). – Parth Trivedi Nov 23 '15 at 10:10

change background of next div depending on selected item

4 Answers4