更好地实现了单击切换类jquery

Question

您好我想知道是否有人可以帮助我。我有一些jquery代码，它在我的页面中为特定的Div添加了一个类。我想知道是否有更好的方法来实现代码，因为它是毛病。我有5个Div ID，我想添加一个可见的类。我还有一个类适用于所有应该切换活动类的div元素。我对jquery相当新，不确定这是否是实现它的正确方法，请参阅下面的代码：

$('.graph-button').click(function() {
    $(this).toggleClass("active");
});    

//Get the Circles to Show text boxes by adding class
$('#value_button').click(function(){
  $('#value_text').toggleClass("visible");
});
$('#history_button').click(function(){
  $('#history_text').toggleClass("visible");
});
$('#vision_button').click(function(){
  $('#vision_text').toggleClass("visible");
});
$('#offering_button').click(function(){
  $('#offering_text').toggleClass("visible");
});
$('#future_button').click(function(){
  $('#future_text').toggleClass("visible");
});

我真的很感激帮助。干杯！

Answer 1

只需在按下按钮时切换下一个元素的类

$('.graph-button').click(function() {
    $(this).toggleClass("active");
    $(this).next().toggleClass("visible");
});  

Answer 2

如果div不是连续的，你可以从当前id开始构建下一个div的id：

$('#' + this.id.split('_')[0] + '_text')

您可以选择属性值为finish的所有div：

$('[id$=_button]')

所以代码片段可能是：

//Get the circles to change border color by adding class
//Get the Circles to Show text boxes by adding class
$('[id$=_button]').click(function(){
  $('#' + this.id.split('_')[0] + '_text').toggleClass("visible");
  $(this).toggleClass("active");
});

/*--------------- Global Styles--------------*/
body{background-color:black;}

.align-center{

  text-align:center;

}

.align-right{
  text-align:right;
}

.align-left{
  text-align:left;
}

/*--Buttons--*/
.graph-button{
  position: absolute;
  border-radius: 50%;
  border: 13px solid rgb(103, 199, 216)           !important;
  width: 79px;
  height: 79px;
  transform-origin: 47.5px 47.5px 0px;
  text-align: center;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  transition: 0.5s ease;

}
.graph-button:hover:before {
  content: " ";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  text-align: center;
  cursor: pointer;
  left: -25px;
  top:-25px;
  background-color: rgba(255, 255, 255, 0.5);
}
.graph-button:hover:after {
  content: " ";
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  text-align: center;
  cursor: pointer;
  left: -40px;
  top: -40px;
  background-color: rgba(255, 255, 255, 0.4);
}
.graph-button p{

  text-align:center !important;
  color:rgb(40, 67, 116);
  font-weight:bold;
  transition: color 0.5s ease;
  line-height:3;
}
.active{

  border: 13px solid rgb(40, 67, 116) !important;
  transition: border 0.5s ease;
}
.active p{
  color:rgb(103, 199, 216);
  transition: color 0.5s ease;
}
.graph-button:after {
  animation: sonarWave 1s ease-in-out infinite;
}
.graph-button:before {
  animation: sonarWave 1s ease-in-out infinite;
}
.graph-button:active{
  animation: pulse .5s ease;

}
/*--Buttons--*/


/*--Animations--*/
@keyframes sonarWave {
  0% {
    opacity: 1;
    transform: scale(0.2);
  }
  5% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes pulse {

  0% {
    transform: scale(0.9);

  }
  100% {
    transform: scale(1);

  }
}

/*--Animations--*/
/*--Text Boxes--*/

.graph-text{

  max-width:25%;
  height:auto;
  position:absolute;
  visibility:hidden;

}
.graph-text h2{

  color:white;

}
.graph-text p{

  color:white;

}
.visible{
  visibility: visible !important;
}

/*--Text Boxes--*/

/*--------------- Global Styles--------------*/



/*--------------- Custom Styles--------------*/

.value-button{

  left: 691px;
  top: 227px;
}
.value-text{

  left: 550px;
  top: 50px;
}

.history-button{
  left: 520px;
  top: 349px;
}
.history-text{

  left: 105px;
  top: 300px;

}

.vision-button{
  left: 587px;
  top: 548px;
}
.vision-text{
  left: 175px;
  top: 510px;
}

.offering-button{
  left: 793px;
  top: 549px;
}
.offering-text{
  left: 925px;
  top: 510px;
}

.future-button{
  left: 854px;
  top: 349px;
}
.future-text{
  left: 980px;
  top: 300px;
}

.center-circle{
  position: absolute;
  border-radius: 50%;
  width: 179px;
  height: 179px;
  background-color: rgb(255, 255, 255);
  left:645px;
  top:360px;
  padding:0.5%;
}
.center-circle-text {
  position: absolute;
  top: 5%;
}
.center-circle-text h1{
  text-align:center;
  font-size:1.2em;
  color:rgba(202, 202, 202, 0.98);
}
.center-circle-text h2{
  text-align:center;
  font-size:1.7em;
  text-transform:uppercase;
  color:rgb(40, 67, 116);
}
.center-circle-text h3{
  text-align:center;
  font-size:1em;
  color:rgba(202, 202, 202, 0.98);
}

/*--------------- Custom Styles--------------*/

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

<div class="value-button graph-button" id="value_button">
    <p>sample</p>
</div>
<div class="value-text graph-text align-center" id="value_text">
    <h2>This is a Heading </h2>
    <p>Lorem ipsum dolor sit amet, qui at augue elitr, eu cum voluptua efficiendi. Ius odio facilis eu, verear epicuri voluptatibus ut pri. Sed ut brute dolor, cu vidit illum tincidunt mea.</p>

</div>



<div class="history-button graph-button" id="history_button">
    <p>sample</p>
</div>
<div class="history-text graph-text align-right" id="history_text">
    <h2>This is a Heading </h2>
    <p>Lorem ipsum dolor sit amet, qui at augue elitr, eu cum voluptua efficiendi. Ius odio facilis eu, verear epicuri voluptatibus ut pri. Sed ut brute dolor, cu vidit illum tincidunt mea.</p>

</div>


<div class="vision-button graph-button" id="vision_button">
    <p>sample</p>
</div>

<div class="vision-text graph-text align-right" id="vision_text">
    <h2>This is a Heading </h2>
    <p>Lorem ipsum dolor sit amet, qui at augue elitr, eu cum voluptua efficiendi. Ius odio facilis eu, verear epicuri voluptatibus ut pri. Sed ut brute dolor, cu vidit illum tincidunt mea.</p>

</div>


<div class="offering-button graph-button" id="offering_button">
    <p>sample</p>
</div>
<div class="offering-text graph-text align-left" id="offering_text">
    <h2>This is a Heading </h2>
    <p>Lorem ipsum dolor sit amet, qui at augue elitr, eu cum voluptua efficiendi. Ius odio facilis eu, verear epicuri voluptatibus ut pri. Sed ut brute dolor, cu vidit illum tincidunt mea.</p>

</div>



<div class="future-button graph-button" id="future_button">
    <p>sample</p>
</div>
<div class="future-text graph-text align-left" id="future_text">
    <h2>This is a Heading </h2>
    <p>Lorem ipsum dolor sit amet, qui at augue elitr, eu cum voluptua efficiendi. Ius odio facilis eu, verear epicuri voluptatibus ut pri. Sed ut brute dolor, cu vidit illum tincidunt mea.</p>

</div>


<!-- <div class="center-circle">
<div class="center-circle-text">
 <h1>sample</h1>
<h2>sample</h2>
 <h3>sample</h3>
</div> -->

<div class="pentagon">

</div>