jQuery හි toggleClass ක්‍රමය සමඟ වැඩ කිරීම

ප්‍රයෝජනවත් ක්‍රමයක් වන toggleClass, ද ඇත. එය නිශ්චිත පන්තිය එය නොමැති නම් එකතු කරන අතර එය ඇති නම් ඉවත් කරයි. එකම බොත්තමක් මත ක්ලික් කිරීමෙන් පිටුවේ මූලද්‍රව්‍යය සමඟ ආවර්තිතා වෙනස්කම් සිදුවන ආකාරයට කිරීමට මෙය අවශ්‍ය විය හැක.

උදාහරණයක් මගින් මෙම ක්‍රමය සලකා බලමු. අපට පහත CSS විලාසයන් ඇතැයි සිතමු:

.red {
	color: red;
}
	
.zzz {
	font-style: italic;
}

zzz පන්තිය සහිත ඡේදයක් ද ඇත:

<p class="zzz" id="test">text</p>
<button>click</button>

උදාහරණයක් ලෙස, බොත්තම මත පළමු අල්ලා ගැනීමේදී, මූලද්‍රව්‍යයට red පන්තිය එකතු වන පරිදි කරමු. එය රතු පාට එකතු කරයි. දෙවරක් කල පසු - මෙම පන්තිය ඉවත් වන අතර රතු පාට අතුරුදහන් වේ. නැවතත් බොත්තම ඔබා ගතහොත් - සියල්ල නැවත සිදුවේ.

පහත කේතය ක්‍රියාත්මක කර බලන්න (zzz පන්තිය ඇලකුරු අකුරින් හඳුනා ගනී, toggleClass වෙනත් පන්ති සමඟ වැඩ කිරීමට බාධා නොකරන බව පෙන්වීම සඳහා):

$('button').click(function() {
	$('#test').toggleClass('red');
});

පළමු අල්ලා ගැනීමෙන් පසු HTML කේතය පෙනෙන්නේ මෙසේය (red පන්තිය එකතු වේ):

<p class="zzz red" id="test">text</p>
<button>click</button>

දෙවන අල්ලා ගැනීමෙන් පසු - මෙසේය (red පන්තිය අතුරුදහන් වේ):

<p class="zzz" id="test">text</p>
<button>click</button>

සියලුම li වලට www පන්තිය එකතු කරන්න, එය නොමැති නම්, සහ එය ඇති නම් ඉවත් කරන්න.