hasClass() in jquery | Webdesigning | Web2tags
HasClass() in jquery
hasClass () फंक्शन का use हम jquery में किसी भी HTML के element के पास class है या नहीं चेक करने क लिए करते है। इस फंक्शन के जरिये हम class क होने पर अपनी कंडीशन चेक करा सकते है।
Ex -
मान लीजये मेरे पास एक div है जिस पे FillColorBox नाम की क्लास लगी है और दो बटन जिन पर fillColorButton नाम की क्लास है एक बटन के पास blue नाम की क्लास है और दूसरे बटन के पास green नाम की क्लास है। जब हम fillColorButton क्लास पे क्लिक करे तो FillColorBox नाम की क्लास बाला एलिमेंट का बैकग्राउंड कलर नीला और हरा हो जा। तो यह पर हम hasClass () का use करके पता लगयेगे की किस बटन के पास ग्रीन क्लास है और किस बटन के पास ब्लू क्लास है। उसी कंडीशन पे हम FillColorBox नाम की क्लास बाला एलिमेंट का बैकग्राउंड कलर बदलेंगे। यहा पर हमे hasClass () फंक्शन का फायदा ये मिलेगा की हम एक कोड में दो क्लिक नहीं बनाने पड़ेगे।
Code
HTML
<div class="FillColorBox" style="background-color: #ededed; height: 200px; line-height: 200px; text-align: center; width: 100%;"><b><span style="font-size: x-large;">div</span></b></div>
<br /><br />
<button class="fillColorButton blue" style="background: blue; color: white; padding: 10px;">Blue</button>
<button class="fillColorButton green" style="background: green; color: white; padding: 10px;">Green</button>
<button class="fillColorButton" style="background: orange; color: white; padding: 10px;">Reset</button>
Jquery
<script>
$(document).ready(function(){
$(".fillColorButton").click(function(){
if($(this).hasClass("blue")){
$(".FillColorBox").css({"background-color":"blue","color":"#fff"})
}else if($(this).hasClass("green")){
$(".FillColorBox").css({"background-color":"green","color":"#fff"})
}else{
$(".FillColorBox").css({"background-color":"#ededed","color":"#000"})
}
});
});
</script>
Output
div
Comments
Post a Comment