Javascript: Rasmlar uchun URL bilan to'ldirish uchun "Loop" dan foydalanish

Mahalliy jilddan tasvirlar ro'yxatini ko'rishni xohladim. O'ylashimcha, kutubxonadan javascriptli kitobni tekshirib ko'rishim kerak.

Men nima qilishni xohlayman:
1. Arrayni har bir rasm fayli uchun barcha URL-lar bilan to'ldiring 2. Ushbu img belgilarining barchasini yozishning o'rniga, qatorni pastadir va yuqori elementlarga img teglarini qo'shing.

Buni moyillikka yaqinlashtiraman. Kimdir yordam berishi mumkin? (Aytgancha, skript yorlig'i, hech narsa qilmaydigan kodni o'z ichiga oladi).

<!DOCTYPE HTML>
<html>
<head>
<title> Quick View Gallery </title> 

<script>
var maxPages = 23;
var arr = [];
for (var i = 1; i <= maxPages; i++) {
arr.push(i);
}
</script>

</head>
<body bgcolor="#333333">

<div id="comicPages">
     






















</div> </body> </html>
1

7 javoblar

agar sizning fayllaringiz doimo n + .jpg kabi bo'lsa, quyidagilarni amalga oshirishingiz mumkin:

var container = document.getElementById('comicPages');

var images = 23;

for (var i = 0; i < images; i++) {
   //this will create and insert the corresponding image
   //new Image() creates a new  element. there is not much of a difference
   //to document.createElement('img'). additional you can call it as:
   //new Image(width, height) in case you already know its dimensions.
    var node = new Image();
   //additional you can also do the following as: node.src = i + '.jpg';
    node.setAttribute('src', i + '.jpg');//but i like conventions
    container.appendChild(node);

   //this will ensure to insert a line break between each image
    if (i < images - 1) {
        container.appendChild(document.createElement('br'));
    }
}

<div id = "comicPages"> </div> qo'shganingizdan so'ng tanangizga uni ishlatish kerakligini yodda tuting.

2
qo'shib qo'ydi
Buning asosiy sababi bor edi, chunki siz menga HTML elementni joylashtirishning bu ishni bajarishi kerakligini aytdingiz. Ishonchim komilki, boshqa javoblar xuddi shunga o'xshash narsa talab qilardi, lekin mening tushunchamdagi ba'zi teshiklarni tuzatish uchun ko'proq o'qish vaqti kerak.
qo'shib qo'ydi muallif RodNICE, manba

JQuery javob bermaydi, chunki bu savolga javob bermadi.

Siz har bir sahifaga o'tishingiz va rasm elementini yaratishingiz va keyinroq bu chiziq roman sahifalariga qo'sha olasiz. Misol uchun:

var arr = [];
for (int i = 1; i <= 23; i++) {
    var ele = document.createElement("img");
    ele.src = i+".jpg";
    arr[i] = ele.src;
    document.getElementById("comicPages").appendChild(ele);
}

Here is a fiddle: https://jsfiddle.net/zwg5gLfu/1/

1
qo'shib qo'ydi

Siz document.createElement dan foydalanishingiz mumkin , Node # cloneNode va Node # appendChild </< kodi> rasm galereyasini komik kitob sahifalari bilan to'ldirish uchun foydalaning. Siz ularni ajratish uchun display: block kabi satrlarni buzish elementlarini ( - ) ishlatish o'rniga tasvirlarni tarbiyalashni xohlashingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var maxPages = 23
var comicPages = document.getElementById('comicPages')
var img = document.createElement('img')

for (var i = 1; i <= maxPages; i++) {
  img.src = i + '.jpg'
  img.alt = 'Comic Page (' + i + '/' + maxPages + ')'
  comicPages.appendChild(img.cloneNode())
}
<!DOCTYPE HTML>
<html>

<head>
  <title> Quick View Gallery </title>
  
</head>

<body bgcolor="#333333">

  <div id="comicPages">
  </div>
</body>

</html>
</div> </div>

0
qo'shib qo'ydi

Agar sizda rasm nomlari ro'yxati mavjud bo'lsa, unda siz shunday tarzda erishishingiz mumkin;

jQuery

var imageUrlCollection = new Array(); //image URL collection
var parentElement = $('#comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
       parentElement.append($('',{id:item,src:imageUrlCollection[item]}));
}

Vanilla JS

var imageUrlCollection = new Array(); //image URL collection
var parentElement = document.getElementById('comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
    var image = document.createElement("img");
     image.id = item;
     image.className = "img";
    image.src = imageUrlCollection[item];   
    parentElement.appendChild(image);
}
0
qo'shib qo'ydi
Savolga jQuery tagini ko'rmayapman.
qo'shib qo'ydi muallif David Thomas, manba
Ham jQuery, ham Vanilla JS kodini qo'shdim
qo'shib qo'ydi muallif forethought, manba

Agar sizda rasm nomlari ro'yxati mavjud bo'lsa, unda siz shunday tarzda erishishingiz mumkin;

jQuery

var imageUrlCollection = new Array(); //image URL collection
var parentElement = $('#comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
       parentElement.append($('',{id:item,src:imageUrlCollection[item]}));
}

Vanilla JS

var imageUrlCollection = new Array(); //image URL collection
var parentElement = document.getElementById('comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
    var image = document.createElement("img");
     image.id = item;
     image.className = "img";
    image.src = imageUrlCollection[item];   
    parentElement.appendChild(image);
}
0
qo'shib qo'ydi
Savolga jQuery tagini ko'rmayapman.
qo'shib qo'ydi muallif David Thomas, manba
Ham jQuery, ham Vanilla JS kodini qo'shdim
qo'shib qo'ydi muallif forethought, manba

Oxirgi kod quyidagi holatda ko'rinadi:

<!DOCTYPE HTML>
<html>
<head>
    <title> Quick View Comic Gallery </title>

</head>
<body bgcolor="#333333">

<div id="comicPages"></div>

<script>
    var container = document.getElementById('comicPages');
    var images = 23;
    for (var i = 0; i <= images; i++) {
        var node = new Image();
        node.setAttribute('src', i + '.jpg');
        container.appendChild(node);
    }
</script>

</body>
0
qo'shib qo'ydi

Oxirgi kod quyidagi holatda ko'rinadi:

<!DOCTYPE HTML>
<html>
<head>
    <title> Quick View Comic Gallery </title>

</head>
<body bgcolor="#333333">

<div id="comicPages"></div>

<script>
    var container = document.getElementById('comicPages');
    var images = 23;
    for (var i = 0; i <= images; i++) {
        var node = new Image();
        node.setAttribute('src', i + '.jpg');
        container.appendChild(node);
    }
</script>

</body>
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb