jquery - 使用Jquery，将显示 block 更改为无不能再次遇到 block

Question

在这里，我的 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>

这里是 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();
             });
        }
    });
});

click_red 类总是在 div#clickable 前面，这就是为什么我必须不显示或阻止。我只能选择一次颜色，因为它们都变成了 display:block，然后 click_red 类停留在 click_blue 和 click_green 前面，我不能再点击了。我想再次单击颜色来执行 addClass( "selected") 和 $( this ).css('display','block');。有人有什么想法吗？

编辑:好的，我有一张 map ，它有 18 个区域图像，它们是 display:none 在人们点击 div#clickable 之前，人们需要选择首先选择颜色，然后单击可单击区域以决定在 map 上显示哪种颜色的图像。就像着色一样，我可以选择不同的颜色来点击不同的区域并显示正确颜色的图像。

这里是 fiddle click me

Answer 1

好吧，我还是没完全明白。我仍然创建了一个 fiddle解释一些工作。您还需要什么，请在评论中更新。 .hide() 和 .show() 用来代替 disply:none/block 东西。