0

I am trying to use the code bellow to reveal a div that contains a loading image for all divs but I cannot make it work.

For example I have 4 divs and inside those divs I have included the div that holds the image loading icon. Each div has a button with same class name. Every time that I press the button the div that holds the loading image appears only in the first div.

P.S I want to keep this structure because I am grabbing some attributes from <a href>

My Jquery Code:

<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>

And my html Code:

<!-- 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

It is because you are using a div id and it should be unique on a HTML document, so you should replace #myloader with .myloader and of course <div id="myloader" to <div class="myloader"

于 2013-01-03T12:05:25.340 回答
1

您对多个元素使用相同的 id。应该只有一个元素具有 id。

尝试这个：

$(".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="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 ..:) ）..所以替换#myloader为.myloaderand ..你可以使用jquery 函数<div id="myloader"来获取加载的 div ...<div class="myloader"prev()

你的代码应该是这样的

$(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 回答