div의 내용을 변경하는 방법

이 질문은 이전에 물어 보았지만 누군가가 더 자세히 설명 할 수 있다면 정말 좋을 것입니다. 나는이 div 안에 div와 table 그리고 image를 가지고있다. 나는 이미지 갤러리를 만들고 있는데, 나는 두 개의 링크를 앞뒤로 가지고있다.이 링크가 어떻게 이미지를 바꾸는 지, 아니면 div 내의 모든 내용을 어떻게 바꿀 수 있을까? 나는 자바 스크립트에 매우 익숙하지 않다. 실제로 그것에 대해 전혀 모른다. 만약 내가 굉장한 단계별 지시로 한 걸음 나아갈 수 있다면, 나는 다른 포스트 코드를 시도했지만 작동하도록 할 수 없다. 그래서 나는 가지고있다. 내가 뭘 잘못하고 있는지 전혀 몰라.div의 내용을 변경하는 방법

출처

2011-04-22 Aaron White

샘플 HTML :

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

전체 사업부를 변경하려면 :

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';

출처

2011-04-22 00:13:13

그래, 내가 이해하고 있는지, 또는 내가 무엇을 요구하고 있는지 분명하지 않은 경우 내 이미지가 동일한 크기가 아니며 스타일이 다르기 때문에 전체 div를 변경해야하므로 각 div가 다르다. 왜 전체 div를 변경해야합니까? 나는 버튼을 사용하여 변경 사항을 트리거하는 대신 링크를 사용하고 싶지 않습니다. 같은 링크가 div를 다른 div로 계속 변경하여 50 개의 다른 div를 좋아할 수 있어야합니다.이 작업을 수행 할 수 있습니까? –

여기가 도움이 될 만든 좋은 예입니다을 . 그것을 밖으로 시도 - 여기

http://jsfiddle.net/SuperBoi45/XMSGe/는 얼핏에 대한 코드입니다 :

HTML :

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

자바 스크립트 :

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를 넣는 것이 좋습니다.

출처

2011-04-22 01:16:57 0x499602D2

div의 내용을 변경하는 방법

답변

관련 문제