0

次のコードを使用して、すべての div の読み込みイメージを含む div を表示しようとしていますが、機能させることができません。

たとえば、4 つの div があり、それらの div の中に画像読み込みアイコンを保持する div を含めました。各 div には、同じクラス名のボタンがあります。ボタンを押すたびに、読み込み中の画像を保持する div は最初の div にのみ表示されます。

PSからいくつかの属性を取得しているため、この構造を維持したい<a href>

私のJqueryコード：

<script type="text/javascript">
    $(document).ready(function() {

        $(".mybutton").click(function() {
            var id = $(this).attr("id");
            var title = $(this).attr("title");

            var dataString = 'id='+ id;

            $('#myloader').fadeIn("fast");

            $.ajax({
                type: "POST",
                url: "getvars.php",
                data: dataString,
                cache: false,

                success: function(html) {
                    $('#myloader').fadeOut("fast");
                }

            });
        });

    });
</script>

そして私のhtmlコード：

<!-- Div 1 -->

<div id="Master" style="width:100px; height:100px;">
    <div id="myloader" style="width:50px; height:50px; display:none;">Wait...</div>
    <a href="" class="mybutton" id="someid" title="sometitle">Press me</a>
</div>

<!-- Div 2 -->

<div id="Master" style="width:100px; height:100px;">
    <div id="myloader" style="width:50px; height:50px; display:none;">Wait...</div>
    <a href="" class="mybutton" id="someid" title="sometitle">Press me</a>
</div>
4

4 に答える 4

1

IDは常に一意である必要があります（そのため、ID .. :)と呼ばれます）..だからとに置き換えます..#myloaderそして.myloader、<div id="myloader"jquery関数を<div class="myloader"使用prev()して、ロードしてdivを取得できます...

コードは次のようになります

$(document).ready(function() {

 $(".mybutton").click(function() 
  {

    var id = $(this).attr("id");
    var title = $(this).attr("title");

    var dataString = 'id='+ id;

    $(this).prev().fadeIn("fast"); //chnages here

  $.ajax({
     type: "POST",
     url: "getvars.php",
     data: dataString,
     cache: false,

     success: function(html)
     {
       $(this).prev().fadeOut("fast"); //and here
     }

   });

 });
});
于 2013-01-03T12:14:09.313 に答える
1

変更<div id="myloader" to <div class="myloader"してから、JS を次のように変更します。

<script type="text/javascript">
$(document).ready(function() {
    $(".mybutton").click(function() {
        var id = $(this).attr("id");
        var title = $(this).attr("title");
        var dataString = 'id='+ id;
        var $loader = $(this).parent().find('.myloader'); //Change this

        $.ajax({
            type: "POST",
            url: "getvars.php",
            data: dataString,
            cache: false,
            beforeSend: function() { //Change this
               $loader.fadeIn("fast");
            }
            success: function(html) {
               $loader.fadeOut("fast"); //Change this
            }
        });
    });
});
</script>
于 2013-01-03T12:07:46.997 に答える
1

複数の要素に同じ ID を使用しています。ID を持つ要素は 1 つだけである必要があります。

これを試して：

$(".mybutton").click(function() 
{

var b = this;

var id = $(this).attr("id");
var title = $(this).attr("title");

var dataString = 'id='+ id;

$('#myloader').fadeIn("fast");

$.ajax({
   type: "POST",
   url: "getvars.php",
   data: dataString,
   cache: false,

   success: function(html)
   {
   $(b).siblings('div')[0].fadeOut("fast");
   }

   });

});
});
于 2013-01-03T12:07:07.113 に答える
1

これは、div id を使用しており、HTML ドキュメント上で一意#myloaderである必要があるためです。.myloader<div id="myloader"<div class="myloader"

于 2013-01-03T12:05:25.340 に答える