Question

我正在处理一个我正在处理的脚本的问题，该脚本从API中获取相同的HTML元素并每20秒更新一次。我有脚本来监视数据属性的变化，如果它检测到变化，则会将其动画化为视图。

我遇到的问题是在第一次出现之后保持标准。如果我将display: none内联属性添加到元素中，或者如果我使用jQuery在页面加载时隐藏元素，则脚本会覆盖该元素，导致它再次消失。

这是HTML元素：

<aside id="alert" class="row" style="display: none" data-supressed="false" data-path="path_here">
</aisde>

这就是Javascript的样子：

  function reloadBar() {
  /* Fires every 20 seconds. */

    var $alert = $("#alert");
    var path = $alert.data('path');

    /* Performs an AJAX call on the feature path. */
    $.ajax ({
      url: path + secondary-path,
      success: function(data) {

        /* If successful it will replace the bar with the new bar. */

        /* Grabs the updated element from the API */
        var newBar = $($.parseHTML(data.rendering)).find('#alert');
        var newBarHtml = newBar[0].outerHTML;

        var currBarSupp = $alert.data('supressed');
        var newBarSupp = newBar.data('supressed');

        /* If the new bar is supressed and old one is not, hide it. */
        if (!currBarSupp && newBarSupp) {
          $alert.animate({height:0});
          $alert.parent().animate({height:0}, function() {
            $(this).hide()
          });
        }

        else {

          /* Replaces the element */
          $alert.replaceWith(newBarHtml);

          /* If the new bar is not supressed, update it and animate it into view. */
          if (!newBarSupp) {
          updateBar(true);
          }
      }
    }
  })
};

updateBar（）将触发将其设置为视图的动画：

function updateBar(isReload) {
    var $alert = $("#alert");

    if (isReload === true) {
      $alert.css("display","block")
      $alert.animate({height:"45px"});
      $alert.parent().animate({height:"45px"}, function() {
        $(this).hide().show("slow");
      });
    }
  }

20秒后，reloadBar脚本将再次触发，并将display: none属性返回到aside元素，这会导致它不应该消失。

是否有一种更加一致的方法可以保留该元素的元素？任何为元素添加任何内联样式/类的东西都会导致问题。我发现，即使我在脚本最初触发时尝试使用.hide（），它仍然会替换元素并删除display: none，因此问题会双向发生。

有什么建议吗？

Answer 1

我设法通过在HTML元素上使用字符串切片并将CSS元素修补到它来解决此问题。首先，我使用var currStyles = $alert.attr("style");

保存了当前元素样式属性

之后我拆分了通过API提供的更新元素的字符串，并为其添加了内联样式。我将此分配给名为updatedBar的新变量：

var updatedBar = newBarHtml.slice(0,6) + ' style="' + currStyles + '"' + newBarHtml.slice(6);

然后我用updatedBar变量替换了页面上的那个元素。

$alert.replaceWith(updatedBar);

现在，脚本在从页面抓取新元素后保持内联样式保持一致，因此jQuery hide（）和show（）现在按预期工作。

内联样式在替换元素时导致问题

1 个答案: