0

我有一个让我发疯的大问题：我有一个包含很多 div 的滚动页面，每个 id 都有不同的 id，一个在另一个之下，并且它们之间没有间隙。视口底部是 4 个固定按钮，它们都具有点击功能：

 $("#button1").click(function() { 
    $('#firstdiv').css("background-image", "url(bg1.jpg)");

 $("#button2").click(function() { 
    $('#firstdiv').css("background-image", "url(bg2.jpg)");

 $("#button3").click(function() { 
    $('#firstdiv').css("background-image", "url(bg3.jpg)");

 $("#button4").click(function() { 
    $('#firstdiv').css("background-image", "url(bg4.jpg)");

如您所见，这些按钮用于更改当前 div 的背景图像。

当我向下滚动并且下一个 div 进入其中时，会触发一个事件。在这种情况下，我想更改具有不同属性的每个按钮的功能，例如

  $("#button1_2").click(function() { 
    $('#seconddiv').css("background-image", "url(bg5.jpg)");

等等..

功能是相同的，但它适用于第二个 div 和另一个 bg 图像......有人可以给我一种动态执行此操作的方法，我不必为所有 div 制作 25 个单击功能吗？

4

2 回答 2

1

更改您的按钮，使它们看起来像这样（属性是重要的东西）：

<button class="image-button" data-image="bg1.jpg">Text</button>

然后您可以一次将您的事件处理程序应用于所有这些：

$(".image-button").click(function() { 
    var url = 'url(' + $(this).data('image') + ')';

    $('#firstdiv').css('background-image', url);
});
于 2013-02-07T20:12:00.693 回答
0

你可以这样做：

<span class="btn" data-num="1">button1</span>
<span class="btn" data-num="2">button2</span>

jQuery：

$(".btn").click(function(){
    $('#firstdiv').css("background-image", "url(bg"+$(this).attr("data-num")+".jpg)");
})
于 2013-02-07T20:11:47.913 回答