Jquery होवर कोड पर सक्रिय स्थिति - जावास्क्रिप्ट, jquery, एचटीएमएल, सीएसएस

मेरे पास निम्न कोड है जो, शानदार रूप से, मेरी छवि का नाम image_off.jpg से hover पर image_on.jpg में बदलता है। मैं इसे एक गैलरी के लिए उपयोग कर रहा हूं।

    $(function(){
$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});
});

हालाँकि मैं चाहता हूँ कि जब मैं किसी एक चित्र पर क्लिक करूँ तो छवि का नाम image_on.jpg पर रहेगा। क्या यह संभव है और क्या यह संभव है कि जब मैं एक और क्लिक करूं तो यह वापस स्वैप हो जाए?

धन्यवाद

उत्तर:

जवाब के लिए 2 № 1

उम्मीद है की यह मदद करेगा

यह ठीक काम करेगा जैसा कि आप पर और बंद होवर के साथ चाहते हैं और जब आप img पर क्लिक करते हैं तो वह चयनित हो जाएगा और वहीं रहेगा और होवर प्रभावित काम नहीं करेगा

और जब आप अगले img पर क्लिक करेंगे तो बाकी सभी जो चुने गए हैं उन्हें हटा दिया जाएगा और होवर प्रभावित उस पर काम करेगा

EDIT ** कोड परिवर्तित करें इसे अभी आज़माएं

$(function(){
$(".img-swap").hover(
function(){
if(!$(this).hasClass("selected")) {
this.src = this.src.replace("_off","_on");
}
},
function(){

if(!$(this).hasClass("selected")) {
this.src = this.src.replace("_on","_off");
}

}).click(function(){
$(".img-swap").removeClass("selected").attr("src",this.src.replace("_on","_off"));;
this.src = this.src.replace("_off","_on");
$(this).addClass("selected").attr("src",this.src.replace("_off","_on"));
});
});

---

उत्तर № 2 के लिए 1

होवर के बजाय आप टॉगल का उपयोग कर सकते हैं:

 $(".img-swap").toggle(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});

संपादित करें: क्लिक पर छवि को पिन करने के लिए (इसे बंद करने के लिए वापस बदलने के लिए रोकें), आप ऐसा कर सकते हैं:

$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){if (!pinned) this.src = this.src.replace("_on","_off");
}).click(){
$(this).data("pinned": !($(this).data("pinned")||false));
});

---

जवाब के लिए 0 № 3

यहाँ कुछ (अप्रकाशित) कोड है:

 $(function(){
$(".img-swap").hover(
function(){
this.src = this.src.replace("_off","_on");
},
function(){
if(!this.hasClass("selected")) {
this.src = this.src.replace("_on","_off");
}
}).click(function() {
$(".img-swap.selected").removeClass("selected");
this.addClass("selected");
});
});

यह क्या कर रहा है एक जोड़ रहा है .selected प्रत्येक क्लिक किए गए तत्व के वर्ग। होवर-आउट फ़ंक्शन इस वर्ग की जांच करता है, और केवल प्रतिस्थापन करता है यदि छवि का चयन नहीं किया गया है।

---

जवाब के लिए 0 № 4

यदि आप कर सकते हैं तो आप बस वर्ग के लिए सीएसएस होवर घटना जोड़ सकते हैं

.img- स्वैप: होवर {src: image_on.jpg}

---