Clicking on an element is triggering all the same class instead of the one clicked on

Question

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.

The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.

Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?

var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
  '
x
'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
  //  old  $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
  $(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
  //  old  $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
  //$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
  $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
  //Getting Catalog Name
  let catalogChoice = $(this).data('catalog-name');
  $('.catalogName').html(catalogChoice);
  event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
  $('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
  $('.catalogCircleExpand').hide().removeClass('rectangle');
});

.smallCatalogWrap {
  width: 100%;
  height: auto;
  margin: 60px 0;
}

.smallCatalogBlock {
  width: 25%;
  height: auto;
  display: inline-block;
  vertical-align: top;
  margin: 20px auto;
  text-decoration: none;
}

.smallCatalogTitle {
  font-family: 'Nunito', sans-serif;
  color: #4d4d4d;
  font-size: 1.3rem;
  text-align: center;
  display: block;
  font-weight: 400;
}

.smallCatalogButtonWrap {
  margin-top: 15px;
  width: 100%;
  position: relative;
}

.catalogSmallCircle {
  background: #225DB8;
  width: 70px;
  height: 70px;
  position: absolute;
  margin: 10px auto;
  left: 90%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, .9);
  border: 2px solid #FFF;
  webkit-transition: all 1s;
  transition: all 1s;
  cursor: pointer;
}

.catalogSmallCircle.rectangle {
  border-radius: 0;
  border: 2px solid #094765;
  background: linear-gradient(to bottom right, #225DB8, #4174C2);
  width: 400px;
  min-height: 200px;
  webkit-transition: all 1s;
  transition: all 1s;
  transform: translate(-45%, -45%);
  -webkit-transform: translate(-45%, -45%);
  z-index: 1;
  cursor: auto;
}

.catalogSmallCircleIn {
  width: 100%;
  height: 100%;
  position: relative;
}

.circlePlus {
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  display: block;
  margin: 0 auto;
  z-index: 1;
}

.catalogCircleExpand {
  height: 0;
  display: none;
  opacity: 0;
  webkit-transition: all .5s;
  transition: all .5s;
}

.catalogCircleExpand.rectangle {
  opacity: 1;
  height: auto;
  webkit-transition: all .5s;
  transition: all .5s;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
  padding: 10px 0;
}

.expandText .catalogDownload {
  font-size: 1.1rem;
  padding: .7em 1.1em;
}

.expandText .pdfSubHeader {
  font-size: 1.1rem;
}

.catalogExpandClose {
  color: #FFF;
}



  
    Catalog
    
      
    
  
  
    Technology

Taplar · Accepted Answer

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.

I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.

$('.smallCatalogBlock').each(function(index, catalogBlock){
  var catalogName = $(catalogBlock).data('fill-specs');
  console.log(catalogName);
  //Filling Circle
  $('.catalogSmallCircle', catalogBlock).html(
    '
x
'
  )
});

//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
  var $smallCircle = $(this).closest('.catalogSmallCircle');
  
  $smallCircle
    .addClass('rectangle')
    .find('.catalogSmallCircleIn')
    .hide();
  
  $smallCircle
    .find('.catalogCircleExpand')
    .fadeIn(100)
    .addClass('rectangle');
    
  //Getting Catalog Name
  let catalogChoice = $(this).data('catalog-name');
  console.log(catalogChoice);
  $smallCircle.find('.catalogName').html(catalogChoice);
  event.stopPropagation();
});

//Close Circle
$('.catalogExpandClose').on('click', function(event) {
  var $smallCircle = $(this).closest('.catalogSmallCircle');

  $smallCircle
    .removeClass('rectangle')
    .find('.catalogSmallCircleIn')
    .fadeIn();
  
  $smallCircle
    .find('.catalogCircleExpand')
    .hide()
    .removeClass('rectangle');
});

.smallCatalogWrap {
	width: 100%;
	height: auto;
	margin: 60px 0;
}
.smallCatalogBlock {
	width: 25%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 20px auto;
	text-decoration: none;
}
.smallCatalogTitle {
	font-family: 'Nunito', sans-serif;
	color: #4d4d4d;
	font-size: 1.3rem;
	text-align: center;
	display: block;
	font-weight: 400;
}
.smallCatalogButtonWrap {
	margin-top: 15px;
	width: 100%;
	position: relative;
}
.catalogSmallCircle {
	background: #225DB8;
    width: 70px;
    height: 70px;
    position: absolute;
    margin: 10px auto;
	left: 90%;
	-webkit-transform: translateX(-50%);transform: translateX(-50%);
    border-radius: 100%;
    box-shadow: 0 0 20px rgba(0,0,0,.9);
	border: 2px solid #FFF;
    webkit-transition: all 1s;transition: all 1s;
    cursor: pointer;
}
.catalogSmallCircle.rectangle {
	border-radius: 0;
	border: 2px solid #094765;
	background: linear-gradient(to bottom right,#225DB8,#4174C2);
	width: 400px;
	min-height: 200px;
	webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
	z-index: 1;
	cursor: auto;
}
.catalogSmallCircleIn {
	width: 100%;
	height: 100%;
	position: relative;
}
.circlePlus {
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    display: block;
	margin: 0 auto;
    z-index: 1;
}
.catalogCircleExpand {
	height: 0;
    display: none;
    opacity: 0;
    webkit-transition: all .5s;
    transition: all .5s;
}
.catalogCircleExpand.rectangle {
	opacity: 1;
    height: auto;
    webkit-transition: all .5s;
    transition: all .5s;
    transition-delay: .4s;
    -webkit-transition-delay: .4s;
	padding: 10px 0;
}
.expandText .catalogDownload {
	font-size: 1.1rem;
	padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
	font-size: 1.1rem;
}
.catalogExpandClose {
  color: #FFF;
}



  
    Catalog
    
      
    
  

    Technology

Clicking on an element is triggering all the same class instead of the one clicked on

Answers (1)

Related Questions