Блог

Главная - Вопросы по программированию - Как изменить содержимое div

Как изменить содержимое div

#javascript

#javascript

Вопрос:

Я знаю, что этот вопрос задавался раньше, но если бы кто-нибудь мог объяснить более подробно, это было бы потрясающе. У меня есть div, таблица и изображение внутри этого div. Я создаю галерею изображений, поэтому у меня есть две ссылки вперед и назад, как мне заставить эти ссылки изменить изображение, или, скорее, все содержимое внутри div. Я очень новичок в javascript, на самом деле я вообще ничего об этом не знаю, если бы я мог получить пошаговую инструкцию, которая была бы потрясающей, я пробовал so с другими почтовыми кодами, но не могу заставить это работать, поэтому я понятия не имею, что я делаю не так.

Ответ №1:

Пример HTML:

 <html>
<head><title>Dummy page</title></head>
<body>
  <div id="divID">
    <img id="backImg" src="http://test.com/sample.jpg">
  </div>
</body>
</html>

Чтобы изменить весь div:

 var div = document.getElementByID('divID');
div.innerHTML = "<b>This is some html</b>";

Чтобы просто изменить изображение:

 var img = document.getElementByID('backImg');
img.src = "http://www.host.com/image.jpg';

Комментарии:

1. Хорошо, итак, я не уверен, что понимаю, или если мне ясно, о чем я спрашиваю, мне нужно изменить весь div, потому что мои изображения разного размера и стиль разный, поэтому каждый div отличается, вот почему мне нужно изменить весь div. Я не хочу использовать кнопку для запуска изменения, а ссылку. и эта же ссылка должна иметь возможность постоянно изменять div на другой div, примерно до 50 разных divs… можно ли это сделать…

Ответ №2:

Вот хороший пример, который я привел, который может помочь. Попробуйте это — http://jsfiddle.net/SuperBoi45/XMSGe /

Вот код для быстрого ознакомления:

HTML:

 <button id="before">Previous</button>
<button id="next">Next</button>
<div id="imageGallery"></div>

JavaScript:

 function $(id) {
    return document.getElementById(id);
}
var foward = null,
    back = null,
    images = [
        "http://www.toxel.com/wp-content/uploads/2009/04/conceptcar04.jpg",
        "http://politicolnews.com/wp-content/uploads/2010/01/bill-gates-car.jpg",
        "http://www.youthedesigner.com/wp-content/uploads/2008/05/car-wallpapers19.jpg",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-555c9ae9cfd364db5307b2e8d717a00d",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-01589fb639efec5433a3e30a8a8dd449",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-31f8cbd6627edc1ba9ef2828f3423fdf",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-0f47a0c2db85b5d7c134d41bcdc65b2e",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-739fd589778207e542a6e31873a24433",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-6056a5df58462ea4951a2b328243b7a2",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-59028363fc0f7d0ee7aa1ebc5e72713a",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-eb09864be7a1fbe7e821bc1ee08c3a8b",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-50bd88090e05a452bba67d510ba4a0cc",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-191b37eea296e90a242d24db90824c5c"
        ];

var img = new Image();
for (var i = 0; i < images.length; i  ) { // caching the images for performance boost
    img.src = images[i];
}

var image = {
    count: -1,
    next: function() {
        if (image.count == (images.length) - 1) return false;
        image.count  = 1;
        $('imageGallery').innerHTML = "<img src=""   images[image.count]   ""/>";
    },
    previous: function() {
        if (image.count <= 0) return false;
        image.count -= 1;
        $('imageGallery').innerHTML = "<img src=""   images[image.count]   ""/>";
    }
};

foward = image.next;
back = image.previous;
$('next').addEventListener("click", foward);
$('before').addEventListener("click", back);

Самое лучшее в этом то, что все, что вам нужно сделать, это добавить новый URL изображения в массив, и он все равно будет работать.
Если вы хотите изменить изображения, но не все содержимое в div, я бы рекомендовал поместить другой div вне галереи изображений.