調用 jQuery 超大插件 onclick

Question

我正在嘗試調用超大插件 ( http://buildinte.net.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/ ) onclick，到目前為止，當我點擊不同的菜單時，圖像是改變了，但看起來 html 由 supersized 構建的標記沒有被重建，現在我有這個：

html 調用 function brown() onclick：

<ul id="rooms_menu" style="display:none;">
<li><a href="javascript:;" onclick="brown()">menu title</a></li>
<p class="rooms_desc">description text</p>

html，我回顯 ajax 響應：

<div id="script">

<script>$(function(){
        $.supersized({
                      slides    :   [
                     {image     : 'img/rooms-default.jpg'}
                     //{image     : 'img/rooms-default.jpg'}
                                    ]
                     })
                     })</script>

</div>

brown() 是一個 ajax function：

 function brown(){
      $.ajax({
      url: 'ajax.php?action=brown',
      success: function(data){
        $('#script').html(data);
             }
           })
    
         }

然后 ajax.php 文件將其內容加載到#script div：

switch($_GET["action"]){
      case "brown":
      echo "<script>$(function(){
         $.supersized({
                   slides :     [
               {image  : 'img/rooms-brown-01.jpg'},
               {image  : 'img/rooms-brown-02.jpg'}
                            ]
                            })
         
                            })</script>";
      break;
      case "rose":  etc.....

所以當我第一次點擊菜單時圖像會更新，但如果我點擊另一個菜單標題圖像也會更新但幻燈片開始混亂，看起來 html 標記沒有重建，當我只使用一個圖像時每個菜單標題（超大數組中只有一個圖像）沒有問題。 R。

Answer 1

在添加新腳本之前

$('#script').html(data);

試着這樣稱呼：

if($.supersized.vars.slideshow_interval){
  clearInterval($.supersized.vars.slideshow_interval);
}

該方法應如下所示：

function brown(){
  $.ajax({
    url: 'ajax.php?action=brown',
    success: function(data){
      if($.supersized.vars.slideshow_interval){
        clearInterval($.supersized.vars.slideshow_interval);
      }
      $('#script').html(data);
    }
  });

}

Answer 2

不是從 PHP 返回整個腳本，你可以簡單地返回圖像標簽（比如

<img src="images/image1.jpg" /><img src="images/image1.jpg" />

...）。 然后在 ajax 成功回調中替換 - $('#script').html(data); - 你可以做

$('#script').empty();
$('#script').html(data);
$('#script').supersized();

Answer 3

我相信這是設置一切的$.supersize.resizenow方法，你試過調用它嗎？

如果做不到這一點，您是否有一個可以訪問的鏈接 web 可以在您嘗試此操作的地方訪問，以便我看一下？

Answer 4

您是否嘗試過在附加新事件之前取消綁定事件？ 像這樣：

switch($_GET["action"]){
      case "brown":
      echo "<script>$(function(){
         $(window).unbind("resize");//add this. you could also add         
                                     //$('#supersized').html('') to remove markup created by the plugin
         $.supersized({
                   slides :     [
               {image  : 'img/rooms-brown-01.jpg'},
               {image  : 'img/rooms-brown-02.jpg'}
                            ]
                            })

                            })</script>";
      break;

您可能必須這樣做，因為插件將一個事件綁定到 window，即使您刪除了插件創建的先前 html，舊事件仍然綁定並且會觸發兩次。

如果您發現任何差異，請告訴我

編輯 - 我看過插件的代碼。 我認為問題出在第 16 行的命令中：

  setInterval("theslideshow()", options.slideinterval);

a function 在給定的時間間隔被調用，如果它沒有被清除，當你再次調用插件時，一個新的時間間隔被設置，所以你有時間問題。 您可以像這樣更正插件。 代替

    if (options.slideshow == 1){
        setInterval("theslideshow()", options.slideinterval);
    }

放

        firstRunofThisPlugin = true;
    if (options.slideshow == 1){
                if (firstRunofThisPlugin){
                     firstRunofThisPlugin = false;
                }else{
                     clearInterval(linkToTheLastInterval);
                }
        linkToTheLastInterval = setInterval("theslideshow()", options.slideinterval);
    }

您正在做的是保存 setInterval() 調用的引用，然后在您下次調用插件時清除該引用。

這使用了兩個不好的全局變量，但如果它解決了問題，我可以幫助您在不使用全局變量的情況下重寫它。

PS你為什么不更新插件的版本？

Answer 5

為什么不加載所有集合並根據需要顯示/隱藏它們？

<script>
  $(function(){
    function selectSet() {
      $(".set").hide();
      $(".set."+$(this).attr("id")).show();
    };
    $(".set.brown").each(selectSet);
  });
</script>

<a href="javascript:;" id="brown" onclick="selectSet()">Choose me!</a>
<a href="javascript:;" id="rose" onclick="selectSet()">No choose me!</a>

<div class="set brown">
  <script>
    $(function() {
      $.supersized({
        slides: [
          {image: 'img/rooms-1.jpg'},
          {image: 'img/rooms-2.jpg'}
        ]
      });
    });
  </script>
</div>

<div class="set rose">
  <script>
    $(function() {
      $.supersized({
        slides: [
          {image: 'img/rooms-3.jpg'},
          {image: 'img/rooms-4.jpg'}
        ]
      });
    });
  </script>
</div>