I am trying to toggle classes on an SVG element with Jquery but for some reason without any luck. There are multiple paths with the same class and I want to toggle them on/off all at the same time.
<path class="fracture-details" d="M360.5,671.5v9h-23v-20h12v11H360.5z"/>
<path class="fracture-lines" d="M285.5,673c0-0.4,0-16.5,0-24.5H246h45.5v27"/>
<path class="fracture-lines" d="M102,542.5l-2.5,3l-1,5l1,2.5l2,1l3.5,1h3l3,2l3.5-1l2-3.5l0.5-9.5l-1-7.5l-1-3"/>
<path class="fracture-lines" d="M144.5,463v-41.5"/>
<path class="fracture-details" d="M329.5,66.5L330,62l17.5,3v8.5H345l-0.5,5.5l-7-0.5L337,80l-7-1l0.5-5.5l-1-1l-6-0.5l1-5.5H329.5z"/>
<path class="fracture-lines" d="M378.5,170v-24"/>
<path class="fracture-details" d="M270.5,365.5h-11v18h11V365.5z"/>
The Jquery I am currently using is as follows:
if ($(".fracture-details").hasClass("toggleMap")) {
$(".fracture-details").attr("class", "fracture-details");
} else {
$(".fracture-details").attr("class", "fracture-details toggleMap");
}
This will be fired on click. The else part seems to work, but the first if statement never fires.
CodePudding user response：
Seems to work fine with addClass and removeClass.
const fractureDetails = $(".fracture-details");
const btn = $('button');
btn.on('click', function() {
addRemoveClass(fractureDetails, 'toggleMap');
});
function addRemoveClass(el, className){
if( el.hasClass(className) ){
el.removeClass(className)
} else {
el.addClass(className)
}
}
addRemoveClass(fractureDetails, 'toggleMap');svg {
width: 50px;
height: auto;
}
.toggleMap {
fill: red;
}
button {
display: block;
margin-bottom: 1em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Class</button>
<svg class="svg-icon" viewBox="0 0 20 20">
<path class="fracture-details" d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
</svg>As mentioned by @Gleb Kemarsky, you can use built in toggleClass.
const fractureDetails = $(".fracture-details");
const btn = $('button');
btn.on('click', function() {
fractureDetails.toggleClass('toggleMap');
});svg {
width: 50px;
height: auto;
}
.toggleMap {
fill: red;
}
button {
display: block;
margin-bottom: 1em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Class</button>
<svg class="svg-icon" viewBox="0 0 20 20">
<path class="fracture-details" d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
</svg>