0

PHP スクリプトによって生成される一連の Web ボタンがあります。ユーザーがこれらのボタンのいずれかをクリックするたびに、対応する非表示が jQuery を使用してフェードインするようにします。

これは私のHTMLコードです

<div id="confirmation-apple" style="display:none;">
    Do you really want to delete this apple?
</div>
<input type="button" id="confirmdelete-pear" value="Delete" />
<div id="confirmation-pear" style="display:none;">
    Do you really want to delete this pear?
</div>

そして、これは私のjavscriptコードです

$(document).ready(
    function() {
        $("#confirmdelete-apple").click(function() {
            $("#confirmation-apple").fadeToggle();
        });
    });
$(document).ready(
    function() {
        $("#confirmdelete-pear").click(function() {
            $("#confirmation-pear").fadeToggle();
        });
    });

私が作成した Fiddle に示されているように完全に機能しますが、ボタンは PHP スクリプトによって自動的に生成されるため (つまり、未定義の数のボタンを使用できます)、JavaScript コードを自動化して各ボタン ID を取得する方法を探しています。 ="confirmation- aCertainString " は、対応する div id="confirmdelete- aCertainString " のフェードインをトリガーします。

よろしくお願いいたします。

4

4 に答える 4

2

最初に「confirmdelete-」で始まるIDを選択するには、 jsfiddleでこのようなものが必要だと思います。クリックイベントを追加した後、「apple」などのid属性から必要な名前を切り取り、「確認-」に追加してフェードします:

$(document).ready(
    function() {
        $('[id^="confirmdelete-"]').click(function() {
            $('#confirmation-'+$(this).attr('id').replace('confirmdelete-','')).fadeToggle();
        });
});
于 2013-04-09T16:34:49.163 に答える
1

ボタンをinput[type="button"]またはで選択できますinput[value="Delete"](具体的には)。または、たとえばボタンにクラスを割り当てて、クリックイベントdeleteに使用します。$('.delete')

次にnext、対応する div を取得するために使用します。したがって、 aCertainString部分も必要ありません。

$(document).ready( function() {
        $('input[type="button"]').click(function() {
            $(this).next().fadeToggle();
        });
});

フィドルを見てください。

于 2013-04-09T15:36:02.503 に答える
0

ボタンで FAKE クラスを使用し、

<input id="btnDelete1" type="button" class="btnDelete" value="Delete">

偽のクラスでボタンを選択し、それぞれにクリック イベントとフェード div を設定しますが、div の ID はこの SomeName + ButtonId のようにする必要があります。

<input type="button" id="confirmdelete-pear" value="Delete" class="btnDelete"/>
<div id="confirmation-confirmdelete-pear" style="display:none;">
    Do you really want to delete this pear?
</div>

div を表示する方法は次のようになります。

$(document).ready(function(){
    $(".btnDelete").each(function(){}).click(function(){
        $("#confirmation-" + this.id.toString()).fadeToggle();
        });
    });
});
于 2013-04-09T15:47:23.487 に答える
0

IDなしでそれを行う別の方法は、次のようなコンテナクラスを使用することですdiv.fruit-container

html

<div class="fruit-container">
    <div>Do you really want to delete this apple?</div>
    <button>Delete</button>
</div>

<div class="fruit-container">
    <div>Do you really want to delete this orange?</div>
    <button>Delete</button>
</div>

<div class="fruit-container">
    <div>Do you really want to delete this pear?</div>
    <button>Delete</button>
</div>

jquery

$('div.fruit-container').find('button').on('click', function() {
   $(this).parent().find('div').fadeToggle();
});

http://jsfiddle.net/gavinbruce/CWsu7/

于 2013-04-09T17:06:44.457 に答える