Using Jquery, change display block to none can't run into block again

Question

Here, my html.

<div class="color_area">
  <div class="blue" data-color="blue"></div>
  <div class="green" data-color="green"></div>
  <div class="red" data-color="red"></div>
</div>

<input type="checkbox" name="checkbox_click" id="checkbox_click1" value="1">
<input type="checkbox" name="checkbox_click" id="checkbox_click2" value="2">
<input type="checkbox" name="checkbox_click" id="checkbox_click3" value="3">

<div id="clickable">
  <div class="click_blue1 clickable" id="blue"><img src="images/blue1.png" id="blue"></div>
  <div class="click_blue2 clickable" id="blue"><img src="images/blue2.png" id="blue"></div>
  <div class="click_blue3 clickable" id="blue"><img src="images/blue3.png" id="blue"></div>

  <div class="click_green1 clickable" id="green"><img src="images/green1.png" id="green"></div>
  <div class="click_green2 clickable" id="green"><img src="images/green2.png" id="green"></div>
  <div class="click_green3 clickable" id="green"><img src="images/green3.png" id="green"></div>

  <div class="click_red1 clickable" id="red"><img src="images/red1.png" id="red"></div>
  <div class="click_red2 clickable" id="red"><img src="images/red2.png" id="red"></div>
  <div class="click_red3 clickable" id="red"><img src="images/red3.png" id="red"></div>
</div>

And here's jquery

$('#clickable div img').hide();
$('div.clickable').css('display','none');

$( ".color_area div" ).on( "click", function() {

  var color = $( this ).attr( "data-color" );

        $( "div.clickable" ).each( function() {
            var forColor = $( this ).attr( "id" );
            if( forColor == color ) {

                if( $( this ).css('display') == 'block'){
                    $( this ).hide();
                }

                $( this ).addClass( "selected" ); 
                $( this ).css('display','block');
             }else {
                $( this ).removeClass( "selected" );
            }
        });
    });


    $( "div.clickable" ).on( "click", function() {

        if( $( this ).hasClass( "selected" ) ) {

            var color = $( this ).attr( "class" );
            $( this ).find('img').show();

             $( "." + color + " img" ).each( function() {
                 $( this ).remove();
             });
        }
    });
});

The click_red class always in front of div#clickable, that's why i have to display none or block. I just can choose the color once, because they all change to display:block, then the click_red class stay in front of click_blue and click_green, i can't click anymore. I want to click color to do addClass( "selected" ) and $( this ).css('display','block'); again. Is anybody have any ideas?

Edit : OK, i have a map, it has 18 region images, they're display:none before people click the div#clickable, people need to choose the color first, then click the clickable area to decide which color of images to show on the map. Just like colouring, i can choose different color to click different region and show the right color's images.

Here the fiddle click me

mayankcpdixit · Accepted Answer · 2013-11-27 09:15:01Z

1

OK, I still couldn't get it completely. Still I created a fiddle explaining a few things working. What else do you need please update in comments. .hide() and .show() is used instead of disply:none / block thing.

edited Nov 27, 2013 at 9:15

answered Nov 27, 2013 at 9:09

mayankcpdixit

2,47424 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3017670 Over a year ago

i'm sorry that i'm not good at english. my problem is $( this ).hide() then it's never go down the code to addClass( "selected" ) here's fiddle link

user3017670 Over a year ago

i want to do is when people click another color, the present color image won't hide.

mayankcpdixit Over a year ago

like? click green greens shown, click red reds also shown(green still remains and never disappears again.)??? like this??

mayankcpdixit Over a year ago

@user3017670 see the updated Fiddle then. you just need to remove else condition from the previous fiddle. Hope this is what you expected.

user3017670 Over a year ago

i'm sorry, because of my problem is can't click back to the blue and green actually. The red color image always on top.

|

Collectives™ on Stack Overflow

Using Jquery, change display block to none can't run into block again

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related