Question

我正在使用Django，我正在尝试创建一个每隔几秒更新一次的水平滚动文本。我到目前为止的代码是（包括我从其他帖子收集的一些代码）：

index.html

<script>
$(document).ready(function() {
  $.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
  var my_refresh = setInterval(function() {
    $('#updateBox').load("{% url 'updateBox' %}");
  }, 1000); 
});

</script>

....
....

<div id="updateBox">
   {% include "updateBox.html" %}
</div>

updateBox.html

<marquee behavior="scroll" direction="left">
      {{updateText_1}}  ;  {{updateText_2}}  ;  {{updateText_3}}
</marquee>

views.py

def getNewTexts(parms):
    (updateText_1,updateText_2,updateText_3) = someAPIwrapper.(parms)
    return (updateText_1,updateText_2,updateText_3)

def index(request):
    return render(request, 'index.html' )

def updateBox(request):
    (updateText_1,updateText_2,updateText_3) = getNewTexts(parms)
    return render(request, 'updateBox.html',    {'updateText_1': updateText_1, 'updateText_2':updateText_2,'updateText_3':updateText_3})

现在这些代码到目前为止产生了这样的结果：文本在加载索引页面时得到正确的值，开始滚动，但在它开始滚动1秒后（脚本中指定的1000毫秒），整个部门“updateBox”得到刷新并重新加载，文本再次从右侧开始滚动。结果是，只有{{updateText_1}}的一半被显示出来。

理想情况下，我希望找到一种解决方案，只更新文本{{updateText_1}} ; {{updateText_2}} ; {{updateText_3}}，而不会中断滚动流程。或者，如果有其他优雅的方法来实现类似的效果，我也想了解它们。提前谢谢！

Answer 1

使用jQuery.load()替换DOM元素的完整innerHTML。在您的情况下，您用新的<marquee>替换现有的<marquee>。但实际上你想要替换<marquee>的内部HTML。

将<div id="updateBox"> <marquee behavior="scroll" direction="left"> {% include "updateBox.html" %} </marquee> </div>放入 index.html

{{updateText_1}}  ;  {{updateText_2}}  ;  {{updateText_3}}

并将其从 updateBox.html

中删除

$('#updateBox>marquee')

在你的JS中，将ajax结果加载到选框<script> $(document).ready(function() { $.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh var my_refresh = setInterval(function() { $('#updateBox>marquee').load("{% url 'updateBox' %}"); }, 1000); }); </script>而不是包装div：

it('dispatches the logout action', () => {
   const store = mockStore({});

   store.dispatch(logout()); // TODO: logout() has a function in its payload that gives an error
   const expectedActions = store.getActions();
   expect(expectedActions).toMatchSnapshot();
});

如何在html中更新/刷新滚动文本（因为它们正在滚动）

1 个答案: