Question

我正在尝试使用下面的代码来显示包含所有div的加载图像的div，但我无法使其工作。

例如，我有4个div，在这些div中，我已经包含了保存图像加载图标的div。每个div都有一个具有相同类名的按钮。每次按下按钮时，保存加载图像的div仅出现在第一个div中。

P.S我想保留这个结构，因为我抓住了<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>

Answer 1

这是因为您使用的是div ID，它在HTML文档中应该是唯一的，因此您应该将#myloader替换为.myloader 当然还有<div id="myloader"到<div class="myloader"

Answer 2

您对多个元素使用相同的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");
   }

   });

});
});

Answer 3

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

Answer 4

ID应始终是唯一的（这就是为什么它被称为ID .. :)）..所以将#myloader替换为.myloader，将<div id="myloader"替换为<div class="myloader" ..您可以使用prev() jquery函数来获取加载的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
     }

   });

 });
});

Jquery所有div的常见加载图像

4 个答案: