JavaScript를 사용하여 이미지 src에 인수를 추가하는 방법은 무엇입니까?

Question

즉, 함수에 전달 된 인수를 사용하여 동일한 코드에 정의 된 src의 중간에 어떻게 배치 할 수 있습니까?

참고 :주십시오 아니요 jQuery. 고맙습니다. 여기

은 ...

자바 스크립트 내 코드입니다 :

<script> 
var icons = document.getElementsByClassName("icon"); // All elements of the "icon" class. 
var x, y; // Counters. 

/* The purpose of the below function is to assign images to 8 members of the same 
class, given a piece of the image name from an argument passed to a function. */ 

function go(test1, test2, test3, test4, test5, test6, test7, test8) { 
    for(x = 0; x < arguments.length, y < (y + 8); x++, y++) 
     icons[y].src = "http://example.com/img/" + arguments[x] + ".jpg"; 
} 
</script> 

HTML :

<img class="icon" src="" /> 
<img class="icon" src="" /> 
<img class="icon" src="" /> 
<img class="icon" src="" /> 
<img class="icon" src="" /> 
<img class="icon" src="" /> 
<img class="icon" src="" /> 
<img class="icon" src="" /> 
<img onclick="go(1, 2, 3, 4, 5, 6, 7, 8)" src="example.jpg" /> 

Answer 1

당신을 위해 작동하지 않는 이유를 100 % 명확하지 않다 . 내 첫 번째 추측은 당신이 URL 문자열을 올바르게 구축하지 못한다는 것입니다. 작성중인 URL은 다음과 같이 표시됩니다 또한

http://example.com/img/1.jpg 
http://example.com/img/2.jpg 
http://example.com/img/3.jpg 

, 일부 재미 비즈니스 거기에 당신의 for 루프와 그 루프에서 y 테스트와 함께. 이 변경하여 (경우에 문제의 원인이) 그것을 정리할 수 있습니다 y < (y + 8)이기 때문에

1. 내가 for 루프의 y 부분을 제거 : 여기

   function go(/* args go here */) { 
       var icons = document.getElementsByClassName("icon"); 
       for(var x = 0; x < arguments.length; x++) 
        icons[x].src = "http://example.com/img/" + arguments[x] + ".jpg"; 
   } 
   

   는 변화와 왜 항상 true이므로 루프를 테스트 할 때 아무런 문제가 없습니다.
2. y을 초기화 한 곳을 본 적이 없습니다.
3. 조건에 쉼표 연산자를 사용했지만 && 연산자도 잘못 사용 된 것은 아닙니다. 조건은 콤마 연산자가 아닌 부울 연산자를 사용해야합니다.
4. x은 글로벌했다. 로컬 변수는 초기화되고 로컬에서 사용되므로 전역 변수에 위험한 이름이므로 로컬 변수로 변경했습니다.
5. y은 더 이상 사용되지 않으므로 icons[x]으로 변경되었습니다.
6. icons의 정의 및 초기화를 전역으로 이동해야 할 이유가 없으므로 함수로 이동했습니다.
7. 명명 된 인수가 사용되지 않았으므로 인수 정의가 제거되었습니다. 무엇을 당신이하려고했던 것은 당신이 마지막 아이콘지나 가본 적이 만드는 것입니다, 경우

, 다음 루프는 그냥이 될 수 있습니다

function go(/* args go here */) { 
    var icons = document.getElementsByClassName("icon"); 
    for (var x = 0; x < arguments.length && x < icons.length; x++) 
     icons[x].src = "http://example.com/img/" + arguments[x] + ".jpg"; 
} 

---

그런 다음, 마지막으로 만약 모든 당신을 URL을 시퀀스로 만들려면 다음과 같이 시작 및 끝 시퀀스 번호를 전달하면됩니다.

function go(begin, end) { 
    var icons = document.getElementsByClassName("icon"); 
    for (var x = 0; x < icons.length && begin <= end; x++, begin++) 
     icons[x].src = "http://example.com/img/" + begin + ".jpg"; 
} 

go(1, 8); 

Answer 2

URL 매개 변수 (쿼리 문자열)로 인수를 전달할 수 있습니다.

는

<img src="myImage.png?test1=bla&test2=3&test4=blablala&test5=etc" /> 

그런 다음이처럼 그들을 검색 할 수 있습니다

function getParameterByName(name) { 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
     results = regex.exec(location.search); 
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

https://stackoverflow.com/a/901144/2407212

당신은 아마 당신이 달성하려고하는 것을 설명 할 수 있습니까?