jquery所有div的常見加載圖像

我想使用代碼下面揭示一個包含所有div的加載圖像的div，但我不能讓它工作。jquery所有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>

來源

2013-01-03 George L.

這是因爲你正在使用div ID，並且它應該在HTML文檔上是唯一的，因此您應該將#myloader替換爲.myloader ，當然還有<div id="myloader"至<div class="myloader"

來源

2013-01-03 12:05:25

任何實例體育比利？ –

你好，我試圖讓它工作，但沒有結果。檢查了這一點：http://jsfiddle.net/ZeroGravity/WdsVp/18/ –

它看起來，你不明白，id必須在每個div獨一無二。你又有重複的ID。這是一個工作示例http://jsfiddle.net/WdsVp/72/，雖然它可以通過許多其他方式實現。 –

您對多個元素使用相同的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-03 12:07:07 ATOzTOA

變化<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-03 12:07:46

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 
    } 

    }); 

}); 
});

來源

2013-01-03 12:14:09 bipen

jquery所有div的常見加載圖像

回答

相關問題