Question

我使用flexslider小部件来显示照片库。它使用简单的标记，因为当文档加载时，标记会适应视口，并且在文档准备好时使用脚本进行样式设置。加载页面时一切正常。但是我需要添加一个＆＃34;选择器＆＃34;，我的意思是，当有人点击链接时，应该在flexslider小部件中加载一个新的库。因此，使用jquery我选择相应的gallery div并使用$。（＆＃34;＃galleryID＆＃34;）编写新内容.empable（）。append（new-markup）;

因此，DOM结构发生了变化，但是flexslider并没有显示，因为它需要完成＆＃34;通过运行适应视口的js代码并对其进行样式化。然后，我尝试了＃34;重新运行＆＃34;修改div后需要脚本，但div仍为空白。如果我从控制台窗口运行相同的脚本，则div正确显示。

现在我使用$ .getScript（）jquery方法，强制再次加载自适应和样式脚本，但有时可以工作，有时也不会。在Firefox中工作正常：每次单击选择器，加载图库确定并运行脚本，但Chrome不会，有时它会，有时div保持白色（正确的标记但不需要修改）。

    <script type='text/javascript'>
    $('a.pgal').click(function () {
    var id = $(this).attr('hashtag');
    /*get the gallery elements (imgs, titles, etc)*/
    $.get("listgal.php", {hashtag:id}, function(objetogal){
    var x=0;
    /*create the flexslider markup*/
    var codigo='<div id="slider" class="flexslider"><ul class="slides">';
    var codigocarousel='<div id="carousel" class="flexslider"><ul class="slides">';
    var elementos=objetogal.length;
    for(x=0;x<elementos;x++)
    {
      codigo=codigo+ '<li><img src="fotos/'+ objetogal[x].img +'" /><p class="flex-caption">'+objetogal[x].pie+'</p></li>'
      codigocarousel=codigocarousel+'<li><img src="fotos/'+ objetogal[x].img +'" />';
    }
    codigo=codigo+'</ul></div>';
    codigocarousel=codigo+codigocarousel+'</ul></div>';

    /*Change the gallery div with this new markup*/
    $("#galeriaID").empty().append(codigocarousel);
    }, "json");
    $.getScript("js/renueva.js", function(){
    });
    return false;
    });
    </script>

renueva.js 这是使用标记作为源来设置和调整图库视口所需的代码。它是我尝试在div刷新后包含在同一个脚本中的代码，但它没有做任何事情。但在控制台中运行工作正常。我现在尝试使用$ .getScript，但有时会使用Chrome处理它的标记，有时候不会。使用Firefox可以完美地运行

$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 90,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
}
});

HTML标记

        <div class="col-xs-12 w12 col-md-9" id="galeriabr">
          <div id="slider" class="flexslider">
            <ul class="slides">
              <li>
                <img src="fotos/armas.jpg" />
                <p class="flex-caption">Se presentan 98 delitos al día en Michoacán</p>
              </li>
              <li>
                <img src="fotos/sep.jpg" />
                <p class="flex-caption">Se tomarán medidas para garantizar evaluación a maestros: SEP</p>
              </li>
              <li>
                <img src="fotos/eleccion.jpg" />
                <p class="flex-caption">Scioli gana elección de Argentina pero puede haber segunda vuelta</p>
              </li>
            </ul>
          </div>
          <div id="carousel" class="flexslider">
            <ul class="slides">
              <li>
                <img src="fotos/armas.jpg" />
              </li>
              <li>
                <img src="fotos/sep.jpg" />
              </li>
              <li>
                <img src="fotos/eleccion.jpg" />
              </li>
            </ul>
          </div>              
        </div>

Answer 1

在形成标记的循环中存在错误，＆lt; /立GT;标签是绝对的。它现在效果更好但有时它再次显示空白div。我将$ .getScript（）行更改为：

    $.when(
    $.getScript( "js/renueva.js" ),
    $.Deferred(function( deferred ){
    $( deferred.resolve );
     })
    ).done(function(){
      recarga();
     });

“recarga（）”它是“renueva.js”中的一个函数我将继续寻求另一个答案，因为它还不完美。每次点击它的选择器时我都需要显示画廊，而不是每10次点击中就有9个。

从代码调用时脚本不起作用，但在控制台中键入时它可以正常工作

1 个答案: