内联样式在替换元素时引起问题

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");保存了当前元素的样式属性var currStyles = $alert.attr("style");

之后，我分割了通过API馈送的更新元素的字符串，并向其中添加了内联样式。 我将其分配给一个名为updatedBar的新变量：

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

然后，我用updateBar变量替换了页面上的该元素。

$alert.replaceWith(updatedBar);

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