使用Jquery，将显示块更改为无，不能再次遇到块 [英] Using Jquery, change display block to none can't run into block again

问题描述

这是我的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');.有人有什么主意吗?

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?

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

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.

在这里提琴点击我

推荐答案

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

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.

这篇关于使用Jquery，将显示块更改为无，不能再次遇到块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！