CODEWITHSUNDEEP
jqueryhtmlcss
user3017670
user3017670

Reputation: 11

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

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

Upvotes: 0

Views: 1115

Answers (1)

mayankcpdixit
mayankcpdixit

Reputation: 2464

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.

Upvotes: 1

Related Questions