20

私はjQueryにあまり詳しくありません。フェードイン/フェードアウトポップアップフォームを作成するためにダウンロードしたこのコードがあります。コードは次のとおりです。

<script type='text/javascript'>
    $(document).ready(function() {
        $('#button').click(function(e) { 
            $('#modal').reveal({ 
                animation: 'fade',
                animationspeed: 150,
                closeonbackgroundclick: true, 
                dismissmodalclass: 'close'
            });
            return false;
        });
    });
</script>

上記のコードは、 の付いたボタンid='button'がクリックされたときに実行されます。複数のボタンがありますが、すべてのボタンでこの関数を呼び出すにはどうすればよいですか? idすべてのボタンを に設定してみましbuttonたが、最初のボタンしか機能しません。どんな助けでも大歓迎です。ところで、言及するのを忘れていましたが、私の .php ファイルには次のコードがあります。

for ($c=1;$c<=5;$c++){
echo "<input type='button' id='button'">
};

この php コードは、「ボタン」という同じ ID を持つ 5 つのボタンを表示します。私がしたいのは、jQuery関数が実行する5つのボタンのいずれかをクリックすると、フェードイン/フェードアウトフォームがポップアップすることです。

4

10 に答える 10

45

最初の解決策:

function doClick(e) { 
   $('#modal').reveal({ 
     animation: 'fade',
     animationspeed: 150,
     closeonbackgroundclick: true, 
     dismissmodalclass: 'close'
   });
   return false;
}
$('#button1').click(doClick);
$('#button2').click(doClick);

2番目の解決策:

関連するすべてのボタンにクラス「someClass」を与える

<input type=button class=someClass ...

そして、やります

$('.someClass').click(function(e) { 
...
});

3番目の解決策:

コンマを使用して ID を区切ります。

$('#button1, #button2').click(function(e) { 
...
});

一般的に、最善の解決策は 2 番目の方法です。これにより、javascript 部分を変更せずにコードにボタンを追加できます。これらのボタンのいくつかを動的に追加する場合は、そうするかもしれません

$(document).on('click', '.someClass', function(e) { 
...
});
于 2012-10-26T08:07:15.077 に答える
1

ボタンに異なるIDを使用し、以下のように機能を変更します。

$（'＃button1、＃button2、＃button3'）。click（function（e）{
....。

于 2012-10-26T08:18:33.617 に答える
0

以下のようにそれを達成する代わりに、cssクラス名を使用できますid

<script type='text/javascript'>
$(document).ready(function() {
    $('.fade').click(function(e) { 
        $('#modal').reveal({ 
            animation: 'fade',
            animationspeed: 150,
            closeonbackgroundclick: true, 
            dismissmodalclass: 'close'
        });
        return false;
    });
});
</script>

ボタンのhtml

<button class="fade">Button1</button>
<button class="fade">Button2</button>
<button class="fade">Button3</button>
于 2012-10-26T08:16:35.710 に答える
0

すべてのボタンに同じボタンIDを使用する場合、すべてのボタンを呼び出す必要はありません..単にこのコードを使用するだけです..このコードでアニメーションを使用しているようです....明らかにする代わりにtogglefadeを使用してください

<script type=text/javascript> $(document).ready(function(){ $("button").click(function(){ $("#buttonid").fadein(); $("#buttonid").fadeout(); }); }); </script>

于 2016-09-28T01:10:50.857 に答える
0

ID は一意である必要があります。次のようなものを使用してみてください

$('input[type="button"]')
于 2012-10-26T08:08:54.007 に答える
0

,あなたのクラスは、分離されたIDを使用してクラスごとに呼び出すことができます

$(document).ready(function() {
$('#button, #button1, #button2').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});​
于 2012-10-26T08:09:08.137 に答える
0 
<script type='text/javascript'>
$(document).ready(function() {
$('#button1,#button2,#button3').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});
</script>

または、前述のクラスを使用 bt dystroy

于 2012-10-26T08:09:28.007 に答える