How to avoid the spread of the toggleClass method in the click event

Asked

Viewed 119 times

0

In the code below I have two toggleClass(are in total 12) that are working properly, but I need it to be expanded only 1, that is, if I expand the primeiro and then the second, immediately the primeiro must repress itself. At the moment, this does not happen. Execute the code below and click on "+":

// when DOM is ready
$(document).ready(function() {
		
	mapItems = $("div.map").find("div img.mapItem");
	
	var tempItem;

	for(var i = 0; i < mapItems.length; i++){
		
		tempItem = mapItems[i];
		
		$(tempItem).click(function($e){

			//Evita o scroll mudar com o click
		    $e.preventDefault();
			$e.stopPropagation();

		    //Obtendo valor do data-desc
		    var desc = $("#" + $(this).attr('id') + "-desc").attr("data-desc");
			var modals = $("#" + $(this).attr('id') + "-desc").attr("data-modals");
			titulodata = $("#" + $(this).attr('id') + "-desc").attr("data-titulocarrossel");
			desccarrossel = $("#" + $(this).attr('id') + "-desc").attr("data-desccarrossel");
		    //Adcionando descrição
			$("#" + $(this).attr('id') + "-desc").html('<p class="descs ' + modals + ' ">'+desc+'</p>'); 
		
		    //Criando a função toggle para a utilização da class modal-celebration(balão)
		    $("#" + $(this).attr('id') + "-desc").toggleClass("modal-celebration " + modals); 

		    //Obtendo o boolean
		    var isVisible = $("#" + $(this).attr('id') + "-desc").is( ":visible" );
		    var isHidden = $("#" + $(this).attr('id') + "-desc").is( ":hidden" );			
						
			//Verificando estado				
			if (isVisible) {
				$(".borda").delay(700).fadeIn(500);
				$("#selectLocation").stop().fadeOut(500);
				$("#galleryContainer").stop().fadeOut(200, onHideGalleryComplete);

			}else{
				$(".borda").delay(700).fadeOut(500);
				$("#galleryContainer").stop().fadeOut(200);
				$("#selectLocation").stop().fadeIn(500);
			}

			//rotacionando
		 	$(this).toggleClass("down"); 
		
		});
	
		
		$(tempItem).click(function(){
		

			TituloEmprendimento = '<h3>' + titulodata +'</h3><p class="desc-carrossel">'+ desccarrossel +'</p>';		
		
			
		});
	};
	
})

function onHideGalleryComplete(){
	loadXMLEntries();
}
body{
		margin: 0;
		padding: 0;
		background-color:#fff;
	}

	/*** main layout ***/

	.main{
		display:block;
		position:relative;
		
		width: 810px;
		height: 1160px;
		
		overflow:hidden;
	}

	.preloader{
		display:block;
		position:absolute;
		
		width: 810px;
		height: 1160px;
		top: 0;
		left: 0;
		
		background-color:#000;
	}
	.preloaderImg{
		display:block;
		position:absolute;
		
		width: 100px;
		height: 44px;
		top: 40%;
		left: 50%;
		margin-left: -50px;
		margin-top: -55px;
	}


	@font-face {
	    font-family: 'Century_Gothic';
	    src: url('../font/Century_Gothic.ttf') format('truetype');
	}

	@font-face {
	    font-family: 'Century_Gothic_BOLD';
	    src: url('../font/Century_Gothic_BOLD.ttf') format('truetype');
	}

	@font-face {
	  font-family: 'Helvetica';
	  src: url('../font/Helvetica.ttf') format('truetype');
	}

	.lote p{
		font-family: 'Helvetica', Arial!important;
	}

	h3 {
	    font-size: 24px;
	    font-family: 'Century_Gothic', sans-serif!important;
	    color: #fff!important;
	}


	.map{
		display:block;
		width: 810px;
		height: 760px;
		
		background-image:url(../img/map-bg2.jpg);
		
	}

	.logo{
	    position: absolute;
	    width: 100%;
	    text-align: center;
	    margin: 68px auto;
		
	}

	.logo h1{
	    width: 730px;
	    margin: -13px auto;
	    font-size: 55px;
	    font-weight: bold;
	}

	.tagline{
		display:none;
		position:absolute;
		
		width: 354px;
		height: 41px;
		margin-left: -183px;
		left: 50%;
		top: 130px;
	}

	.galleryBox{
		background: url(../img/bg-galeria.jpg);
		position:absolute;
		display:none;
		left: 0%;
		top: 760px;
		
		width: 810px;
		height: 300px;
		
		padding:0;
		margin:0;
	}

	.galleryName{
		display: block;
		position: absolute;
		width: 689px;
		left: 37px;
		text-align: left;
		top: -3px;
	}


	.selectLocation{
	    position: absolute;
	    display: none;
	    left: 0%;
	    top: 760px;
	    width: 810px;
	    height: 300px;
	    padding: 0;
	    margin: 0;
	}

	.footer{
		background-image:url(../img/footer-bg.png);
		display:none;
		position:absolute;
		width: 810px;
		height: 100px;
		top: 1060px;
	    background-repeat: no-repeat;
	}

	.celebration{
	    position: absolute;
	    width: 160px;
	    height: 97px;
	    left: 84%;
	    top: -17px;
	}


	.instagramFollow{
	    position: absolute;
	    width: 162px;
	    height: 95px;
	    left: 36px;
	    top: 14px;
	}

	/*** gallery stuff ***/

	#galleryContainer {
		position:relative;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
	}

	#galleryTopContainer {
		width: 728px;
		margin: 0 auto;
		height: 300px;
		overflow: hidden;
	}

	.galleryPictureList {
		position:relative;
		left:0px;
		width:0px;
	}

	.galleryPictureItem {
	    display: inline-block;
	    zoom: 1;
	}

	.galleryBoxPicture{
		    margin-top: 102px;
		    width: 240px;
		    margin-left: 4px;
		    height: 177px;

	}
	.galleryBoxDescription{
		font-family:Arial, Helvetica, sans-serif;
		font-size: 12px;
		position:absolute;
		bottom: 0px;
		display:none;		
		width: 44px;
		height: 50px;		
		margin-left: 30px;
		margin-bottom: 10px;			
		background-color:rgba(0,0,0,0.6);		
		color:#DDD;
		padding:5px;
	}

	.galleryArrowBtn {
		position:absolute;		
		width:66px;
		height: 100%;
		background-repeat:no-repeat;
	}

	.galleryArrowBtn:hover {
		background-position:-66px 0px;
	}

	.galleryArrowLeft {		
		visibility:hidden;		
		left: 41px;
   		top: 102px;
		background-image:url(../img/arrowLeft.png);
	}

	.galleryArrowRight {		
		visibility:hidden;
		left: 724px;
    	top: 102px;
		background-image:url(../img/arrowRight.png);
	}

	/*** other ***/

	.mapItem{
		display:block;
		position:absolute;
		cursor: pointer;
		cursor: hand;	
		background-repeat:no-repeat;
		background-position: 0 0;
	}

	.mapLabel{	
		display:block;
		position:absolute;
		background-repeat:no-repeat;
		background-position: 0 0;
		width: 250px;
		height: 100px;
	}
	.mapDesc{
		display:block;
		position:absolute;
		background-repeat:no-repeat;
		background-position: 0 0;
		width: 256px;
	    height: 106px;
	}

	

	
	/*** PORTICO ***/

	#z-in-portico-build{
	    z-index: 1!important;
		position: relative;
		right: 433px;
        top: -99px;
		width: 1px;
	}


	#portico-build{
		z-index: 1!important;
		left: 495px;
		top: 180px;

	}

	#portico-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 483px;
		top: 55px;
	}

	#portico-build-img{
		right: -447px;
		top: 181px;
		position: relative;
		z-index: -2;
	}



	/*** CASA ***/

	#z-in-casa-build{
        z-index: 0!important;
		position: relative;
		right: 98px;
		top: 8px;
		width: 1px;
	}


	#casa-build{
		z-index: 1!important;
		left: 547px;
   		top: 31px;

	}

	#casa-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 533px;
    	top: -97px;
	}

	#casa-build-img{
		right: -496px;
    	top: 32px;
		position: relative;
		z-index: -2;
	}
    

	
		/*** STREET ***/

	#z-in-street-park-build{
        z-index: 0!important;
		position: relative;
		right: 344px;
        top: -59px;
		width: 1px;
	}


	#street-park-build{
		z-index: 1!important;
	    left: 557px;
	    top: 142px;

	}

	#street-park-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 533px;
    	top: 8px;
	}

	#street-park-build-img{
    right: -509px;
    top: 150px;
    position: relative;
    z-index: -2;
	}




	/*** POR GERAL***/	


	#z-in-portico-geral-build{
		z-index: 0!important;
		position: relative;
		right: 280px;
		top: 141px;
		width: 1px;
	}


	#portico-geral-build{
		z-index: 1!important;
		left: 547px;
   		top: 31px;

	}

	#portico-geral-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 533px;
    	top: -97px;
	}

	#portico-geral-build-img{
		right: -496px;
    	top: 32px;
		position: relative;
		z-index: -2;
	}



/* ----------------------------------------*/

	.redes{ 
		width: 387px;
	    float: left;
	    color: #fff;
	}

	.redes ul{ width: 200px; }

	.redes ul li{  
		width: 25px;
	    float: left;
	    margin-left: 16px;
	    margin-top: 21px;
	}

	.lote{
		width: 645px;
		float: left;
		color: #fff;
		font-size: 7px;
		text-align: left;
		position: relative;
		top: -8px;
	}
    

   p.p-top{
    font-size: 15px;
    margin: 0 0 10px;
    color: #fff;
    float: right;
    position: relative;
    left: -43px;
    top: 192px;
    width: 280px;
    text-align: right;
   }

   p.p-bot{
	font-size: 15px;
    margin: 0 0 10px;
    color: #fff;
    float: right;
    position: relative;
    left: 238px;
    top: 209px;
    width: 280px;
    text-align: right;
   }

   p {    	
	   	font-family: 'Century_Gothic', 
	   	sans-serif; color: #fff; 
    }

   .redes p {font-family: 'Century_Gothic_BOLD', sans-serif;   }


	.rotate{
	    -moz-transition: all 2s linear;
	    -webkit-transition: all 2s linear;
	    transition: all 0.5s linear;
	}


	.rotate.down{
	    -moz-transform:rotate(225deg);
	    -webkit-transform:rotate(225deg);
	    transform:rotate(225deg);
	}

	@-webkit-keyframes overlayfx {
	   0% { -webkit-transform: scale(.8); opacity: 0; }
	   100%   { -webkit-transform: scale(1.1); opacity: 1;  z-index: 1; }
	}
	@-moz-keyframes  overlayfx {
	   0% { -moz-transform: scale(.8); opacity: 0; }
	   100%   { -moz-transform: scale(1.1); opacity: 1;  z-index: 1;  }
	}
	@keyframes overlayfx {
	   0% { transform: scale(.8); opacity: 0; }
	   100%   { transform: scale(1.1); opacity: 1;  z-index: 1;  }
	}


	.modal-celebration {
	  display: block!important;
	  width: 158px;
	  height: 158px;
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  opacity: 0;
	  -webkit-transform: scale(.8);
	  -webkit-animation: overlayfx 0.3s linear 0.1s 1 forwards;  
	  -moz-transform: scale(.8);
	  -moz-animation: overlayfx 0.3s linear 0.1s 1 forwards;  
	  transform: scale(.8);
	  animation: overlayfx 0.3s linear 0.1s 1 forwards;

	}

p.descs.portico-build {
    font-weight: bold;
    color: #2B467D;
    position: relative;
    top: 72px;
    left: -49px;
    text-align: center;
    width: 156px;
    font-size: 15px;
}



p.descs.street-park-build {
    font-weight: bold;
    color: #2B467D;
    position: relative;
    top: 68px;
    left: -32px;
    text-align: center;
    width: 148px;
    font-size: 15px;
}
<div class="main">
	<div id="map" class="map">
		
        
        <!-- LOCAIS -->
        
         <div id="z-in-portico-build">
             <div class="mapDesc" data-titulocarrossel="LOCAL1" data-desccarrossel="LOCAL1" data-desc="LOCAL1" data-modals="portico-build" id="portico-build-desc" style="display: none;"></div>
            
            <a href="#"><img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png" class="mapItem itemDefault rotate" id="portico-build"/></a>
          
        </div>

       
        <div id="z-in-street-park-build">
        <div class="mapDesc" data-titulocarrossel="LOCAL2" data-desccarrossel="LOCAL2" data-desc="LOCAL2" data-modals="street-park-build" id="street-park-build-desc" style="display: none;"></div>
            
            <a href="#"><img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png" class="mapItem itemDefault rotate" id="street-park-build"/></a>
           
        </div>

       
</div>

   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jquery html
  • 1

    If it is "one at a time" then it is as expected. But perhaps what you want is that when one is active/open the other must be disabled/closed. If this is the case you should clarify.

  • Yeah! Know how to fix?

  • Gosh, there are so many ways to solve this because it’s so trivial. The weird thing is that if you did all this it should be easy to solve this too. What I would do is isolate this in specialized methods/functions. There would be a function such as apply winds(helmets, callback). Then the 2nd parameter would be a function like display(element) which activates/displays the clicked element and closes all other elements opened earlier. This not only works with 2 items but also with numerous, exactly as in a component of type accordion.

  • You get the idea? I hardly put any more here because this is a mess, the staff comes out negatively the answers in a strange way (there are some maria-vai-com-as-outras).

  • @felipsmartins, I was also noticing this some time ago, but then I learned that actually here it is organized to the point where you need to shine in the answer to be positive. Help awe , bro!

  • 1

    I will do and post the link here in the comments. Give me a minute, please.

  • @felipsmartins, it’s working?

  • 1

    here is the example link: http://jsfiddle.net/72jjj1ne/

  • I figured out why it’s negative, brother, you don’t develop your answer from the question, but you create something alternative, sometimes complex, that requires more work, because there’s little explanation. BUT THANK YOU! I LEARNED A LOT. You are a great javascript developer, think and do. Congratulations.

Show 4 more comments

2 answers

0

Follow a solution to do what you want.

$(document).ready(function() {

  var $descritions = $('div[id*="z-in-"] .mapDesc');
  var $buttons = $('div[id*="z-in-"] a');
  var $rotates = $('img.rotate');
  var toggleClasses = 'modal-celebration portico-build';

  $buttons.on('click', function($e) {

    //Evita o scroll mudar com o click
    $e.preventDefault();
    $e.stopPropagation();
    
    var $self = $(this);
    var $prev = $self.prev();
    var $current = $prev.is('.modal-celebration.portico-build');

    //Obtendo valor do data-desc
    var desc = $prev.data("desc");
    var modals = $prev.data("modals");
    var titulodata = $prev.data("titulocarrossel");
    var desccarrossel = $prev.data("desccarrossel");
      
    //Adcionando descrição
    $prev.html('<p class="descs ' + modals + ' ">' + desc + '</p>');
        
    //Criando a função toggle para a utilização da class modal-celebration(balão)
    $prev.toggleClass("modal-celebration " + modals);
    
    //Verificando estado
    if ($current) {
        $(".borda").delay(700).fadeIn(500);
        $("#selectLocation").stop().fadeOut(500);
        $("#galleryContainer").stop().fadeOut(200, onHideGalleryComplete);

      } else {
        $(".borda").delay(700).fadeOut(500);
        $("#galleryContainer").stop().fadeOut(200);
        $("#selectLocation").stop().fadeIn(500);
      }
        
    $descritions.removeClass(toggleClasses);
    $rotates.removeClass("down");
    
    if (!$current) {
      $index = $self.index($buttons);
      $descritions.eq($index).addClass(toggleClasses);
      $self.find('img.rotate').addClass('down');
    }
         
  });

})

function onHideGalleryComplete() {
  loadXMLEntries();
}
.main,.preloader{width:810px;height:1160px}body{margin:0;padding:0;background-color:#fff}.main{display:block;position:relative;overflow:hidden}.preloader,.preloaderImg{position:absolute;display:block}.preloader{top:0;left:0;background-color:#000}.preloaderImg{width:100px;height:44px;top:40%;left:50%;margin-left:-50px;margin-top:-55px}@font-face{font-family:Century_Gothic;src:url(../font/Century_Gothic.ttf) format('truetype')}@font-face{font-family:Century_Gothic_BOLD;src:url(../font/Century_Gothic_BOLD.ttf) format('truetype')}@font-face{font-family:Helvetica;src:url(../font/Helvetica.ttf) format('truetype')}.lote p{font-family:Helvetica,Arial!important}h3{font-size:24px;font-family:Century_Gothic,sans-serif!important;color:#fff!important}.map{display:block;width:810px;height:760px;background-image:url(../img/map-bg2.jpg)}.galleryBox,.tagline{display:none;position:absolute}.logo{position:absolute;width:100%;text-align:center;margin:68px auto}.logo h1{width:730px;margin:-13px auto;font-size:55px;font-weight:700}.tagline{width:354px;height:41px;margin-left:-183px;left:50%;top:130px}.galleryBox,.selectLocation{height:300px;padding:0;margin:0}.galleryBox{background:url(../img/bg-galeria.jpg);left:0;top:760px;width:810px}.footer,.galleryArrowBtn{background-repeat:no-repeat}.galleryName{display:block;position:absolute;width:689px;left:37px;text-align:left;top:-3px}.footer,.selectLocation{display:none;width:810px;position:absolute}.selectLocation{left:0;top:760px}.footer{background-image:url(../img/footer-bg.png);height:100px;top:1060px}.celebration{position:absolute;width:160px;height:97px;left:84%;top:-17px}.instagramFollow{position:absolute;width:162px;height:95px;left:36px;top:14px}#galleryContainer{position:relative;left:0;top:0;width:100%;height:100%}#galleryTopContainer{width:728px;margin:0 auto;height:300px;overflow:hidden}.galleryPictureList{position:relative;left:0;width:0}.galleryPictureItem{display:inline-block;zoom:1}.galleryBoxPicture{margin-top:102px;width:240px;margin-left:4px;height:177px}.galleryBoxDescription{font-family:Arial,Helvetica,sans-serif;font-size:12px;position:absolute;bottom:0;display:none;width:44px;height:50px;margin-left:30px;margin-bottom:10px;background-color:rgba(0,0,0,.6);color:#DDD;padding:5px}.galleryArrowBtn{position:absolute;width:66px;height:100%}.galleryArrowBtn:hover{background-position:-66px 0}.mapDesc,.mapItem,.mapLabel{display:block;position:absolute;background-repeat:no-repeat;background-position:0 0}.galleryArrowLeft{visibility:hidden;left:41px;top:102px;background-image:url(../img/arrowLeft.png)}.galleryArrowRight{visibility:hidden;left:724px;top:102px;background-image:url(../img/arrowRight.png)}.mapItem{cursor:pointer;cursor:hand}.mapLabel{width:250px;height:100px}.mapDesc{width:256px;height:106px}#casa-build-desc,#portico-build-desc,#portico-geral-build-desc,#street-park-build-desc{display:none;background-image:url(../img/descriptions/descri.png)}#z-in-portico-build{z-index:1!important;position:relative;right:433px;top:-99px;width:1px}#portico-build{z-index:1!important;left:495px;top:180px}#portico-build-desc{left:483px;top:55px}#portico-build-img{right:-447px;top:181px;position:relative;z-index:-2}#z-in-casa-build{z-index:0!important;position:relative;right:98px;top:8px;width:1px}#casa-build,#portico-geral-build{z-index:1!important;left:547px;top:31px}#casa-build-desc,#portico-geral-build-desc{left:533px;top:-97px}#casa-build-img,#portico-geral-build-img{right:-496px;top:32px;position:relative;z-index:-2}#z-in-street-park-build{z-index:0!important;position:relative;right:344px;top:-59px;width:1px}#street-park-build{z-index:1!important;left:557px;top:142px}#street-park-build-desc{left:533px;top:8px}#street-park-build-img{right:-509px;top:150px;position:relative;z-index:-2}#z-in-portico-geral-build{z-index:0!important;position:relative;right:280px;top:141px;width:1px}.redes{width:387px;float:left;color:#fff}.redes ul{width:200px}.redes ul li{width:25px;float:left;margin-left:16px;margin-top:21px}.lote{width:645px;float:left;color:#fff;font-size:7px;text-align:left;position:relative;top:-8px}p.p-bot,p.p-top{font-size:15px;margin:0 0 10px;float:right;position:relative;width:280px;text-align:right;color:#fff}p.p-top{left:-43px;top:192px}p.p-bot{left:238px;top:209px}p{font-family:Century_Gothic,sans-serif;color:#fff}.redes p{font-family:Century_Gothic_BOLD,sans-serif}.rotate{-moz-transition:all 2s linear;-webkit-transition:all 2s linear;transition:all .5s linear}.rotate.down{-moz-transform:rotate(225deg);-webkit-transform:rotate(225deg);transform:rotate(225deg)}@-webkit-keyframes overlayfx{0%{-webkit-transform:scale(.8);opacity:0}100%{-webkit-transform:scale(1.1);opacity:1;z-index:1}}@-moz-keyframes overlayfx{0%{-moz-transform:scale(.8);opacity:0}100%{-moz-transform:scale(1.1);opacity:1;z-index:1}}@keyframes overlayfx{0%{transform:scale(.8);opacity:0}100%{transform:scale(1.1);opacity:1;z-index:1}}.modal-celebration{display:block!important;width:158px;height:158px;position:absolute;top:0;left:0;bottom:0;opacity:0;-webkit-transform:scale(.8);-webkit-animation:overlayfx .3s linear .1s 1 forwards;-moz-transform:scale(.8);-moz-animation:overlayfx .3s linear .1s 1 forwards;transform:scale(.8);animation:overlayfx .3s linear .1s 1 forwards}p.descs.portico-build,p.descs.street-park-build{font-weight:700;color:#2B467D;position:relative;text-align:center;font-size:15px}p.descs.portico-build{top:72px;left:-49px;width:156px}p.descs.street-park-build{top:68px;left:-32px;width:148px}
<div class="main">
  <div id="map" class="map">
    <!-- LOCAIS -->
    <div id="z-in-portico-build">
      <div class="mapDesc" data-titulocarrossel="LOCAL1" data-desccarrossel="LOCAL1" data-desc="LOCAL1" data-modals="portico-build" id="portico-build-desc" style="display: none;"></div>
      <a href="#">
        <img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png" class="mapItem itemDefault rotate" id="portico-build" />
      </a>
    </div>
    <div id="z-in-street-park-build">
      <div class="mapDesc" data-titulocarrossel="LOCAL2" data-desccarrossel="LOCAL2" data-desc="LOCAL2" data-modals="street-park-build" id="street-park-build-desc" style="display: none;"></div>
      <a href="#">
        <img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png" class="mapItem itemDefault rotate" id="street-park-build" />
      </a>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

A hint every time you use the same selector from jQuery repeatedly, store the result of the selection in a variable so you prevent the jQuery keep sweeping the DOM searching for the element too often.

  • Your code doesn’t solve my problem, since I mentioned that I work with 12 sites and you only set 2. There isn’t a way that works for as many as needed?

  • Dude if you increase the amount of sites keeps running I haven’t done anything with fixed id exactly why

  • What does that mean: var toggleClasses = 'modal-celebration portico-build'; I was in doubt.

  • I put the selector in a variable to avoid writing multiple times.

0

The method not(), helped me solve the problem with the method removeClass() who pass the selectors I need.

$(".mapDesc").not("#" + $(this).attr('id') + "-desc").removeClass("modal-celebration");

  • Lollipop, it was no longer simple, store the active item in the previous interaction, then you remove the class del?.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.