Question

我有一个让我疯狂的大问题：我有一个包含大量div的滚动页面，每个都有不同的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-images ... 有人可以请给我一个动态的方法，我不必为所有的div做25个点击功能吗？

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

Answer 2

你可以这样做：

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

根据div类动态创建按钮的属性

2 个答案: