I have several buttons that use the same class. I am using a click function to make adjustments to the button. The issue I am having is the click function is controlling all of the buttons with the same class.
I am using $(document.body) as the selector because the data I derives asynchronously.
I'm wanting to toggle the class for both the triggerPosition and 'triggerButton. Originally, I just had$(document.body).on('click', '.triggerButton', function() {and thought adding 'triggerPosition into it would allow the $(this) function to work for both the triggerPosition and triggerButton, but it doesn't.
Does anyone see what I need to do? The triggerButton is working for the specific one clicked on. Currently, the triggerPosition is the issue.
$(document.body).on('click', '.triggerButton', '.triggerPosition', function() {
$('.triggerPosition').toggleClass('active');
$(this).toggleClass('active');
});.triggerRow {
display: block;
border-bottom: 1px solid #2f2f2f;
width: 500px;
}
.triggerButton {
width: 55px;
height: 30px;
background: #4d4d4d;
border: 1px solid #2f2f2f;
border-radius: 20px;
position: relative;
box-sizing: border-box;
cursor: pointer;
}
.triggerButton.active {
background: #b82222;
}
.triggerPosition {
position: absolute;
left: -2px;
top: -2px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFF;
border: 2px solid #4d4d4d;
transform: translateX(0);
-webkit-transition: ease 0.3s;transition: ease 0.3s;
}
.triggerPosition.active {
border: 2px solid #b82222;
transform: translateX(21px);
-webkit-transition: ease 0.3s;transition: ease 0.3s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="triggerRow" data-triggerid="1"><div class="triggerButton"><div class="triggerPosition"></div></div></div><div class="triggerRow" data-triggerid="2"><div class="triggerButton"><div class="triggerPosition"></div></div></div>