0

我正在尝试制作一个更改 div 背景的按钮。我想为 javascript 函数提供 2 个参数。

我将更改背景的 div 的 ID 背景类型的数量。

例如...

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

我想要的函数将背景DIV的类更改为background1、background2、background3、background4 ...直到10（参数）

我想要一个带参数的函数，因为我会在很多 div 中使用！做不到 =(

4

2 回答 2

2

尝试这个...

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

样品用法：

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

在这里工作 jsfiddle（鉴于我没有你的背景图片，我正在提醒它设置的内容）

于 2013-04-18T00:42:13.570 回答
1

如果您对新的 HTML5 功能持开放态度，我将使用属性“数据”来存储每个 div 上的 bg 计数，并且我将通过仅使用 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 中，锚点会尝试将您发送到某个位置，而不是使用其他链接，例如跨度：

<span onclick="change('my_div')" >Change BG of "my_div" the next bg </span>
于 2013-04-18T02:08:17.627 回答