单击一个元素会触发所有相同的类，而不是单击一个

时间：2018-11-08 19:02:09

标签： javascript jquery html

我正在创建一个针对每个.smallCatalogBlock div的弹出菜单。您在标题下看到的圆圈是触发器。我遇到的问题是，如果您单击蓝色圆圈，则两个弹出菜单均会逐渐淡入，而此时该菜单应该只是该特定菜单。

弹出标题也是如此。它仅使用前.smallCatalogBlock条信息，而不是单击的信息。

有人知道如何在我要使用的动态设置中保留此信息，同时为单击的对象填充特定信息吗？

var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
  '<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
  <div class="smallCatalogBlock" data-fill-specs="Catalog">
    <span class="smallCatalogTitle">Catalog</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div>
  <div class="smallCatalogBlock" data-fill-specs="Technology">
    <span class="smallCatalogTitle">Technology</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

您必须循环访问smallCatalogBlock并分别构建它们，否则它们将具有相同的目录名称。然后在事件处理程序中，必须使所有选择器成为上下文查找。

我运行了修改后的代码，它似乎可以正确构建圆，但是由于某些原因，即使您检查该元素，该文本也没有出现在圆上。没有弄清楚那部分，但这至少应该向您展示如何执行上下文逻辑和循环以构建元素。

$('.smallCatalogBlock').each(function(index, catalogBlock){
  var catalogName = $(catalogBlock).data('fill-specs');
  console.log(catalogName);
  //Filling Circle
  $('.catalogSmallCircle', catalogBlock).html(
    '<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
  )
});

//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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
  <div class="smallCatalogBlock" data-fill-specs="Catalog">
    <span class="smallCatalogTitle">Catalog</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div><div class="smallCatalogBlock" data-fill-specs="Technology">
    <span class="smallCatalogTitle">Technology</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div>
</div>

相关问题
最新问题