मैं एक फोटोग्राफी वेबसाइट के लिए एक पोर्टफोलियो स्थापित करने की कोशिश कर रहा हूं और जब मुझे तस्वीरें मिलती हैं तो मैं एक समय में कई जोड़ता हूं, क्या टैग बनाने की प्रक्रिया को स्वचालित करने के लिए जावास्क्रिप्ट का उपयोग करने का कोई तरीका है जितनी बार मुझे लिंक गिनती के साथ चाहिए यूपी।

मैंने अन्य जगहों पर देखने की कोशिश की है और वास्तव में कुछ भी नहीं दिखा।

<div class="container" id="Gallery">
        <figure class="gallery__item gallery__item--1"><img src="./img/image1.jpg" alt="image1" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--2"><img src="./img/image2.jpg" alt="image2" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--3"><img src="./img/image3.jpg" alt="image3" class="gallery__img"></figure>
</div>
function addElement() {
            var figure = document.createElement("figure");
            document.getElementById('Gallery').appendChild(figure);
            figure.className += 'gallery__item';

            var photo = document.createElement("img");
            document.getElementById('gallery__item').appendChild(photo);
            photo.className += 'gallery__img';
        }

मैं कोड की इन पंक्तियों को एक निर्धारित मात्रा में फिर से बनाने के लिए जावास्क्रिप्ट प्राप्त करना चाहता हूं, कहें कि अगर फ़ोल्डर में 10 फाइलें हैं तो कोड इस लाइन को दस बार फिर से बनाएगा। साथ ही छवि का स्रोत उदाहरण के लिए गिना जाता है "image1.jpg, image2.jpg, image3.jpg, ...."

0
Changi.pro 17 अक्टूबर 2019, 12:59

4 जवाब

सबसे बढ़िया उत्तर

ऐसे मानों को पास करने के लिए data-attr का प्रयोग करें।

function solution() {
  const _listElNodeList = document.querySelectorAll('.container');
  _listElNodeList.forEach((_listEl) => {
    const count = _listEl.dataset.count;
    for (let i = 1; i <= count; i++) {
      const figure = document.createElement('figure');
      figure.classList.add('gallery__item');
      figure.classList.add('gallery__item--' + i);
      const img = document.createElement('img');
      img.classList.add('gallery__img');
      img.src = "./img/image" + i + ".jpg";
      img.alt = 'image' + i;
      figure.appendChild(img);
      _listEl.appendChild(figure);
    }

  });
}

solution();
<div class="container" id="Gallery" data-count="10"></div>
1
Sumit Ridhal 17 अक्टूबर 2019, 10:31

आप html को <div class="container" id="Gallery"> के अंदर बनाने के लिए टेम्पलेट शाब्दिक का उपयोग कर सकते हैं और इसे एक लूप में जोड़ सकते हैं।

यदि आपके पास एक सरणी के अंदर चित्र हैं, तो लूप करें और उन्हें अपने div में जोड़ें।

const div = document.getElementbyId('Gallery');

for (i = 0; i < pictures.length; i++) {
  div.innerHTML += `<figure class="gallery__item gallery__item--${i}"><img src="${picture[i]}" alt="image${i}" class="gallery__img"></figure> `
}

या ऐसा ही कुछ, लेकिन टेम्प्लेट लिटरल्स की खोज करें।

0
Sergiu Elmi 17 अक्टूबर 2019, 10:32

माना जाता है कि आप इसे प्राप्त करने में आपकी सहायता के लिए किसी भी आसान ढांचे का उपयोग नहीं करना चाहते हैं, आपका कोड निम्नानुसार दिख सकता है:

<html>
<head>
</head>
<body>
  <div class="container" id="Gallery">
  </div>
  
  <script>

	function buildImages() {
  
		var NUMBER_OF_IMAGES = 10;
		var gallary = document.getElementById('Gallery')

		for (var currentImageNumber=1; currentImageNumber <=10; currentImageNumber++) {
			var figure = document.createElement("figure");
			var photo = document.createElement("img");
	  
			var currentImageName = "image" + currentImageNumber.toString();
	  
			figure.className = 'gallery__item';
			photo.className = 'gallery__img';
			photo.src = "./img/" + currentImageName + ".img";
			photo.alt = currentImageName;
			figure.appendChild(photo);

			gallary.appendChild(figure);
		}
	}

	buildImages();
</script>
</body>
</html>

ध्यान दें कि फ़ंक्शन बॉडी टैग के अंत में दिखाई देता है ताकि सभी DOM को उसके महत्वपूर्ण चलाने से पहले लोड किया जाएगा ताकि var gallary = document.getElementById('Gallery') सही ढंग से काम करे स्पष्टीकरण

0
amos guata 17 अक्टूबर 2019, 10:40

यह मानते हुए कि आप ES6 सिंटैक्स का उपयोग कर सकते हैं, इस समाधान के लिए किसी निश्चित मात्रा में फ़ाइलों की आवश्यकता नहीं है। मुख्य पंक्ति है: photos.forEach(x => addElement(x));। मैंने अतिरिक्त संदर्भ के लिए उदाहरण एप्लिकेशन के साथ GalleryPhotoFiles क्लास को जोड़ा है।

एक पैरामीटर के रूप में अपनी फ़ोटो जानकारी को addElement() पर भेजने पर विचार करें। यह भविष्य में उपयोग के लिए इसे और अधिक एक्स्टेंसिबल बना देगा।

class GalleryPhotoFiles {
    constructor(imageSource, alt, etc) {
        this.imageSource = imageSource;
        this.alt = alt;
        this.etc = etc;
    }

    imageSource = '';
    alt = '';
    etc = '';
}

const photo1 = new GalleryPhotoFiles('./img/image1.jpg', 'image1', 'etc'),
    photo2 = new GalleryPhotoFiles('./img/image2.jpg', 'image2', 'etcc'),
    photo3 = new GalleryPhotoFiles('./img/image3.jpg', 'image3', 'etccc');

// Assuming you have an array of files (I'm calling them photos)
const photos = [photo1, photo2, photo3];

// apply your function to each file
photos.forEach(x => addElement(x));

function addElement(galleryFile: GalleryPhotoFiles) {

    const figure = document.createElement('figure');
    document.getElementById('Gallery').appendChild(figure);

    // You might want to add info from the photo objects
    figure.className += `gallery__item_${galleryFile.alt}`;

    const photo = document.createElement('img');
    document.getElementById('gallery__item').appendChild(photo);
    photo.className += `gallery__img__${galleryFile.etc}`;
    photo.src = galleryFile.imageSource;
}
0
Remy 17 अक्टूबर 2019, 11:12