调用 jQuery 超大插件 onclick

Question

我正在尝试在单击时调用超大插件 (http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/)，到目前为止，当我单击不同的菜单时，图像已更改，但看起来超大的 html 标记构建不会被重建，现在我有这个：

在点击时调用函数 brown() 的html：

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

我在其中回显 ajax 响应的 html：

<div id="script">

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

</div>

brown() 是一个 ajax 函数：

 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 方法设置了所有内容，你试过调用它吗？

如果不这样做，您是否有一个可通过网络访问的链接，您正在尝试此操作以便我看一下？

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;

您可能必须这样做，因为插件将一个事件绑定到窗口，即使您删除了该插件创建的以前的 html，旧事件仍然被绑定并且它会触发两次。

如果你发现任何不同，请告诉我

编辑 - 我查看了插件的代码。我认为问题在于第 16 行的命令：

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

一个函数在给定的时间间隔被调用，如果它没有被清除，当你再次调用插件时，会设置一个新的时间间隔，所以你有时间问题。您可以像这样更正插件。而不是

    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() 调用的引用，然后在下次调用插件时清除该引用。

这使用了两个不好的全局变量，但如果它解决了问题，我可以帮助你在不使用全局变量的情况下重写它。

附：为什么不更新插件的版本？

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>