Question

最近，我在SPA网页上看到了一个惊人的问题。当我使用chrome开发者控制台编写代码时，它可以运行一次。当我更改过滤器交互时，该代码不起作用。这是网站链接：https://www.butlins.com/latest-offers/prices.aspx?start=08/2017

我的简单测试代码如下：谢谢，它的工作原理，但这段代码工作两次。为什么呢？

function updateChanges(){
$("a#whatsOnLink").css({"position": "absolute" ,"margin-top": "110px", "margin-left": "-50px"});
  $("p.latest-type").append("<p class='someText'><b>2 Adults and 2 Children</b></p>");
  $("p.someText").css({"font-size": "12px","margin-top": "10px"});
  $("p.latest-type").css({"font-size": "16px"});
  $("a.button.bookingEngine.button-red").css({"margin-top": "-10px"});
  $('.latest-offer-price').each(function(el){
    var data = $(this).text().substring(1);
    $(this).text('£'+(data*4));
  });
}

$(document).ajaxSuccess(function(){
  setTimeout(updateChanges,30)
});

updateChanges();

当我在控制台中编写代码并按回车键时，追加并计算两次。

此外，我更改过滤器交互，DOM元素闪烁与违反颜色。我不知道为什么会这样。

那么，行为的原因是什么呢？

为什么DOM元素在过滤器交互时会闪烁颜色？

有解决方法吗？

Answer 1

尝试插入新的<style>标记。如果它确实是SPA，则应用过滤器后规则应保留在那里。如果页面完全重新加载，则需要在每个新页面加载后运行新代码

let rule ='a.button.bookingEngine.button-red{background-color: blue}'   

$('head').append($('<style>', {text:rule}))

该页面的css规则具有非常具体的选择器。

另一种方法是挂钩他们的jQuery ajax并使用ajaxSuccess全局，这将在任何ajax请求成功后触发

function updateBtns(){
   $("a.button.bookingEngine.button-red").css({"background-color": "blue"})
}

$(document).ajaxSuccess(function(){
  setTimeout(updateBtns,30)
});

updateBtns()

过滤器交互后，为什么控制台中的代码不起作用？

1 个答案: