更好地实现点击切换 class jquery
better implementation of on click toggle class jquery
您好，我想知道是否有人可以帮助我。我有一些 jquery 代码，可以将 class 添加到我页面中的特定 Div。我想知道是否有更好的方法来实现代码，因为它有问题。我有 5 个 Div ID，我想向其添加一个可见的 class。我还有一个 class，它适用于所有 div 元素，这些元素应该切换活动 class。我是 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");
});
非常感谢您的帮助。干杯！
只要按下一个按钮，就切换下一个元素的 class
$('.graph-button').click(function() {
$(this).toggleClass("active");
$(this).next().toggleClass("visible");
});
如果 div 不连续，您可以从当前 ID 开始构建下一个 div 的 ID：
$('#' + this.id.split('_')[0] + '_text')
并且您可以 select 所有具有属性值的 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>
您好，我想知道是否有人可以帮助我。我有一些 jquery 代码，可以将 class 添加到我页面中的特定 Div。我想知道是否有更好的方法来实现代码，因为它有问题。我有 5 个 Div ID，我想向其添加一个可见的 class。我还有一个 class，它适用于所有 div 元素，这些元素应该切换活动 class。我是 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");
});
非常感谢您的帮助。干杯！
只要按下一个按钮，就切换下一个元素的 class
$('.graph-button').click(function() {
$(this).toggleClass("active");
$(this).next().toggleClass("visible");
});
如果 div 不连续，您可以从当前 ID 开始构建下一个 div 的 ID：
$('#' + this.id.split('_')[0] + '_text')
并且您可以 select 所有具有属性值的 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>