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之前，这就是我必须显示none或阻止的原因。我只能选择一次颜色，因为它们都变为display:block，然后click_red类停留在click_blue和click_green之前，我再也无法点击了。我想点击颜色再次执行addClass( "selected" )和$( this ).css('display','block');。有人有什么想法吗？

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

这里是小提琴click me

Answer 1

好的，我仍然无法完全得到它。我仍然创建了一个fiddle来解释一些有用的东西。您还需要什么，请在评论中更新。使用.hide() and .show()代替disply:none / block。

使用Jquery，将显示块更改为none不能再次进入块

1 个答案: