자바 스크립트 함수로 배경 변경

Question

내 div의 배경을 변경하는 버튼을 만들려고합니다. javascript 함수에 2 개의 매개 변수를 지정하고 싶습니다.

배경을 바꿀 div의 ID입니다. 백그라운드 유형이 NUMBER 개입니다. 예를 들어

...

<div id="background" class="background1"> 
    <p>Choose a Background</p> 
    <a href="javascript:change(background,10)" class="btn"></a> 
    </div> 

내가 원하는 기능은 10합니다 (있었던 파라미터)

I까지 background1, background2, background3, background4 ...에 배경 DIV의 클래스를 변경 많은 div에서 사용할 것이기 때문에 매개 변수가있는 함수가 필요합니다!

<div id="Something"></div> 
<a href="#" onclick="return change('Something')">Change Background</a> 

Working jsfiddle here (감안할 때 나는 당신의 배경 이미지를하지 않아도, 난 : 는 ... 그것은 (

Answer 1

이 시도 =

var nextId = 1; 
var highestId = 10; //highest image Id 

function change(DivId) { 

    //Change the background image only... 
    document.getElementById(DivId).style.backgroundImage = '../' + nextId + '.jpg'; 

    /*Or to set class instead, swap the above line for the one below...*/ 
    //document.getElementById(DivId).className = 'BackgroundClass' + nextId; 

    if(nextId > highestId) {nextId = 1;} 
    return false; 
} 

샘플 사용을 할수 없어 무엇을 설정했는지 경고 함)

Answer 2

새로운 HTML5 기능을 사용할 수 있다면 '데이터'속성을 사용하여 각 div에 bg 수를 저장하고 답변을 간소화합니다. g 불과 3 가능한 배경은,하지만 당신은 배열 내에서 원하는만큼을 추가 할 수 있습니다

var bgs = new Array('images/bg_a.jpg','images/bg_b.jpg','images/bg_c.jpg'); 

function change(div_id){ 
    elm_div = document.getElementById(div_id); 
    if((elm_div.getAttribute('data-bg') == null || elm_div.getAttribute('data-bg') == (bgs.length-1)){ 
    new_bg_pos = 0 
    }else{ 
    new_bg_pos = elm_div.getAttribute('data-bg'); 
    new_bg_pos++ 
    } 
    elm_div.setAttribute('data-bg',new_bg_pos); 
    elm_div.style.background = "url("+bgs[new_bg_pos]+")"; 
} 

div_id 변경하려는 부문의 id, 그것은 회전합니다 기능을 배열의 모든 배경을 통해 'data-bg'속성 (이전 브라우저와 호환되지 않을 수도 있음)에 위치를 저장하는 각 부서마다 별도로. HTML에서 또한

, 대신 스팬과 같은 다른 링크를 사용 뭔가, 앵커는 어떤 위치에 당신을 보내려고합니다 : 당신이 jQuery를 사용하고자하는

<span onclick="change('my_div')" >Change BG of "my_div" the next bg </span>