प्रोग्राम को एक img टैग के src को बदलें

Question

मैं जावास्क्रिप्ट का उपयोग करके srcकिसी imgटैग की विशेषता को कैसे बदल सकता हूं ?

<img src="../template/edit.png" name=edit-save/>

सबसे पहले मेरे पास एक डिफ़ॉल्ट src है जो "../template/edit.png" है और मैं इसे "../template/save.png" onclick के साथ बदलना चाहता था।

अद्यतन: यहाँ मेरे HTML पर क्लिक करें:

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

और मेरे जे.एस.

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

मैंने इसे एडिट के अंदर डालने की कोशिश की है (), यह काम करता है लेकिन इमेज को दो बार क्लिक करने की जरूरत है

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }

Answer 1

अपने img टैग को एक आईडी दें, फिर आप कर सकते हैं

document.getElementById("imageid").src="../template/save.png";

Comments

एक इनपुट का मान सेट या एक छवि src (बदलते तरह साधारण चीजों के लिए अपवादभूत जब आप तत्वों है कि आईडी का उपयोग कर रहे हैं), तुम सच में jQuery से बचने के लिए, कॉल इतना शुद्ध जे एस कॉल की तुलना में धीमी है के बाद से प्रयास करना चाहिए

— ब्रायन लीशमैन

@ william44isme और हमारा पृष्ठ पहले की अपेक्षा धीमा हो जाएगा। मुझे लगता है कि jQuery सिर्फ उन वेबसाइटों के लिए उपयोगी है जो समान कोड का उपयोग करते हैं, बहुत अधिक। उदाहरण के लिए यदि हम उपरोक्त कोड का उपयोग 30 या 50 से अधिक बार करते हैं। इसलिए jQuery

— Mahdi Jazini

Answer 2

आप jquery और जावास्क्रिप्ट विधि दोनों का उपयोग कर सकते हैं: यदि आपके पास उदाहरण के लिए दो चित्र हैं:

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1) जेकरी विधि->

$(".image2").attr("src","image1.jpg");

2) जावास्क्रिप्ट विधि->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

इस प्रकार के मुद्दे के लिए jquery उपयोग करने के लिए सरल है।

Comments

पोस्टर ने कभी भी jQuery समाधान में कोई रुचि नहीं दिखाई। और न ही jQuery विधि सरल है। JQuery समाधानों के साथ JS प्रश्नों का उत्तर न दें (जब तक कि पद इंगित न करें कि वे चाहते हैं)। यह सिर्फ JS सीखने की कोशिश कर रहे लोगों को भ्रमित करता है।

— मेटाक्लिन

getElementByClassName सभी तत्वों का संग्रह लौटाता है। हमें तत्व के सूचकांक का भी उल्लेख करने की आवश्यकता है। var छवि = document.getElementsByClassName ("image2") [0]; image.src = "image1.jpg"

— तुषार गौरव

Answer 3

यदि आप JQuery लाइब्रेरी का उपयोग करते हैं तो इस निर्देश का उपयोग करें:

$("#imageID").attr('src', 'srcImage.jpg');

Comments

सवाल jQuery के जवाब के लिए नहीं पूछता है, एक jQuery टैग शामिल करें, या सुझाव दें कि jQuery का उपयोग करना ठीक है।

— Popnoodles

जब एक समान फ़ंक्शन जावास्क्रिप्ट में सही तरीके से बनाया गया है, तो लोगों को jQuery का उपयोग करने के लिए कहने का कोई मतलब नहीं है। प्रत्येक JS प्रश्न को jQuery के उत्तर की आवश्यकता नहीं होती है। यह समाधान एक कीचड़ है जो लोगों को सीखने से रोकता है कि वेनिला जेएस पहले से क्या कर सकता है।

— मेटाकॉलिन

Answer 4

अब ठिक है

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}

Answer 5

<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />

Comments

इनलाइन जेएस बिल्कुल एक महान विचार नहीं है।

— फ्लोरेसेंटग्रीन 5

Answer 6

इस मामले में, जैसा कि आप srcअपने तत्व के पहले मूल्य को बदलना चाहते हैं , आपको फ़ंक्शन बनाने की कोई आवश्यकता नहीं है। आप तत्व में इस अधिकार को बदल सकते हैं:

<a href='#' onclick='this.firstChild.src="../template/save.png"')'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

आपके पास ऐसा करने के कई तरीके हैं। आप इस प्रक्रिया को स्वचालित करने के लिए एक फ़ंक्शन भी बना सकते हैं:

function changeSrc(p, t) { /* where p: Parent, t: ToSource */
  p.firstChild.src = t
}

तब आप कर सकते हो:

<a href='#' onclick='changeSrc(this, "../template/save.png");'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

Answer 7

आपके द्वारा प्रदान किए गए स्निपेट के साथ (और तत्व के माता-पिता के बारे में धारणा किए बिना) आप के साथ छवि का संदर्भ प्राप्त कर सकते हैं

document.querySelector('img[name="edit-save"]');

और src के साथ बदलें

document.querySelector('img[name="edit-save"]').src = "..."

इसलिए आप वांछित प्रभाव को प्राप्त कर सकते हैं

var img = document.querySelector('img[name="edit-save"]');
img.onclick = function() {
    this.src = "..." // this is the reference to the image itself
};

अन्यथा, जैसा कि अन्य ने सुझाव दिया है, यदि आप कोड के नियंत्रण में हैं, तो idछवि को असाइन करने के लिए बेहतर है एक संदर्भ प्राप्त करें getElementById(क्योंकि यह एक तत्व को पुनः प्राप्त करने का सबसे तेज़ तरीका है)

Answer 8

अपनी छवि को एक आईडी दें। फिर आप अपनी जावास्क्रिप्ट में ऐसा कर सकते हैं।

document.getElementById("blaah").src="blaah";

आप किसी भी तत्व के किसी भी विशेषता के मूल्य को बदलने के लिए ".___" विधि का उपयोग कर सकते हैं।

Answer 9

हो सकता है क्योंकि आपके पास टैग के माता-पिता की तरह एक टैग हो। इसलिए आपको दो बार छवियों पर क्लिक करना होगा।

मेरे लिए समाधान यह है: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb