/ / jQuery - क्लिक (छवियों को सरल बनाना) पर छवियां बदलना [बंद] - jquery, image, getelementbyid

jQuery - क्लिक (छवियों को सरल बनाना) पर छवियां बदलना [बंद] - jquery, image, getelementbyid

मैंने छवियों को बदलने के लिए एक मिनी डेमो बनायापर क्लिक करें। सोचा कि मैं कुछ फीडबैक प्राप्त कर सकता हूं यह देखने के लिए कि मैं कोड को कैसे छोटा / साफ़ कर सकता हूं। छवि आकारों को ध्यान में रखें, वे "एफपीओ हैं। छवि लोड पर थोड़ा सा अंतराल भी है। मैं इस उदाहरण में एक प्रीलोडर को कैसे एकीकृत कर सकता हूं?

मुझे नहीं लगता कि यह हासिल करने का प्रयास करने वाला यह सबसे अच्छा समाधान है। किसी के पास मुझे इंगित करने के लिए कोई समान संसाधन है?

http://jsfiddle.net/mJ7Wc/

$(document).ready (function () {
$("#wheel1").click (function () {
document.getElementById("changeBack").src="http://placehold.it/50x50";
document.getElementById("changeFront").src="http://placehold.it/50x50";
});
$("#wheel2").click (function () {
document.getElementById("changeBack").src="http://placehold.it/30x30";
document.getElementById("changeFront").src="http://placehold.it/30x30";
});
$("#wheel3").click (function () {
document.getElementById("changeBack").src="http://placehold.it/60x60";
document.getElementById("changeFront").src="http://placehold.it/60x60";
});
$("#wheel4").click (function () {
document.getElementById("changeBack").src="http://placehold.it/80x80";
document.getElementById("changeFront").src="http://placehold.it/80x80";
});
});

उत्तर:

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

आपके लिए कुछ विकल्प

1. नक्शा का प्रयोग करें:

(नीचे नोट्स देखें।)

$(document).ready (function () {
var images = {
wheel1: {
front: "http://placehold.it/50x50",
back:  "http://placehold.it/50x50"
},
wheel2: {
front: "http://placehold.it/30x30",
back:  "http://placehold.it/30x30"
},
wheel3: {
front: "http://placehold.it/60x60",
back:  "http://placehold.it/60x60"
},
wheel4: {
front: "http://placehold.it/80x80",
back:  "http://placehold.it/80x80"
}
};

$(".wheels").click(function() {
var entry = images[this.id];
if (entry) {
$("#changeFront")[0].src = entry.front;
$("#changeBack")[0].src  = entry.back;
}
}
});

उस पर दो नोट्स:

  1. मैंने उपयोग करने की अधिक जटिल चीज की हैसामने और पीछे के लिए अलग-अलग छवियां, बस अगर आप इसका मतलब रखते हैं, तो तुरंत नहीं देख रहे हैं कि हम एक ही छवि को दो बार दोहराना क्यों चाहते हैं। यदि आप वास्तव में एक ही छवि को दो बार उपयोग करना चाहते हैं, तो बस इसे बनाएं wheelX किसी ऑब्जेक्ट के बजाए वास्तविक पथ दर्ज करें front तथा back.

  2. अगर यह अलग-अलग होता है तो मैंने पूरा पथ शामिल किया है। अगर यह भिन्न नहीं होता है, तो निश्चित रूप से आविष्कार बिट को फ़ंक्शन में ले जाएं और बस शामिल करें 50x50 या नक्शे में जो भी हो।

2. प्रयोग करें data-* तत्वों पर गुण।

$(document).ready (function () {
$(".wheels").click(function() {
var $this = (this);
$("#changeFront")[0].src = $this.attr("data-front");
$("#changeBack")[0].src  = $this.attr("data-back");
}
});

... जहां आपके पहिये मार्कअप में छवियों को निर्दिष्ट करते हैं:

<div id="wheel1" class="wheels" data-front="http://placehold.it/50x50" data-back="http://placehold.it/50x50">

... और ऊपर से वही दो नोट इस पर लागू होते हैं।