DIV에서 새 이미지를 업데이트하는 방법은 무엇입니까?

Question

저는 HTML과 자바 스크립트를 처음 사용합니다. 제발 누군가가 다음과 같은 나를 도울 수 있습니다. 다음 코드는 페이지가로드 된 후 정상적으로 579를 표시합니다. 그러나 전체 페이지를 새로 고치지 않고 다른 번호를 표시하려면 이 필요합니다. 예를 들어 무언가가 마우스 클릭과 같이 트리거되면 795 (이미지)가 표시됩니다. 으로 무엇을 할 수 있습니까? 이전에 사용한 것과 같은 위치에 이미지가 표시되도록 새 번호를 만드십시오. 고맙습니다.

' DisplayNumImg (5,7,9);

<a href="#" onclick="DisplayNumImgChanged(7,9,5)" /a> 



#child2-3 
{ 
position: absolute; 
width: 165px; 
height: 15px; 
left: 5px; 
top: 40px; 
} 

.thumb_child1 
{ 
    float:right; 
    margin:0px; 
} 


function DisplayNumImg(a, b, c) 
{ 

    var s; 

    if (a == 5) { 
    s = '<img class="thumb_child1" src="./images/5_blu.png"> '; 
    document.write(s); 
    } 

    if (a == 7) { 
    s = '<img class="thumb_child1" src="./images/7_blu.png"> '; 
    document.write(s); 
    } 

    if (a == 9) { 
    s = '<img class="thumb_child1" src="./images/9_blu.png"> '; 
    document.write(s); 
    } 
} 

function DisplayNumImgChanged(a,b,c) 
{ 
    // please help me with code here or something that you think it would work. Thanks. 
} 

`

Answer 1

좋아, 먼저 jQuery를 배우고 사용해야한다고 제안한다. (일단 가지고 있다면, 개발자로서 계속 개선하고 싶다면 돌아가서 그 코드가 어떻게 동작 하는지를 배워라. 그것을 강화한다). 그것은 당신을 위해 일을 훨씬 쉽게 만들어 줄 것입니다.

이 경우 이미지 요소에서 src 속성을 업데이트하는 것으로 들리는 것 같습니다. 원시 JS에서

$('.thumb_child1').attr('src', './images/9_blu.png'); 

식으로 뭔가를 할 것이라고 : 다음과 같이 jQuery를 통해이 작업을 수행 할 수 있습니다

var thumbs = document.getElementsByTagAndClassName(null, 'thumb_child1'); 
for (var i = 0; i < thumbs.length; i++) { 
    thumbs[i].src = './images/9_blu.png'; 
} 

(. 위의 코드가 검증되지 않은하지만 당신은 문제가 있다면, 그래서 다시 게시) 난 당신까지 무엇인지 이해하는 경우

Answer 2

1. (지금!) document.write를 사용하지 않는
2. 넣어 CSS를
3. 만 스크립트 태그에 자바 스크립트를 넣어
4. 스타일 태그에 stackoverflow에 실제 코드 게시 (그 코드는 작동하지 않을 것입니다)

Answer 3

,이 같은 뭔가 일할 수 :

function DisplayNumImgChanged(a,b,c) 
{ 
    var valueArray = [a, b, c]; 
    var imgElems = document.getElementsByClassName('thumb_child1'); 
    for (var i = 0 ; i < imgElems.length ; i++) { 
     imgElems[i].src = './images/' +valueArray[i]+ '_blu.png'; 
    } 
}