0

私は私を夢中にさせている大きな問題を抱えています：私はたくさんの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)");

等々..

関数は同じですが、2番目のdivと別のbg-imagesで機能します...すべての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 に答える