Question

我正在使用这个javascript来编辑一个网址，以排序wordpress中无法编辑的插件生成的列表：

<script type="text/javascript">
var sortRegex = /\[sort_by\]=\w*/;
function priceHighZ() {
  location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=price');
}
function priceLowZ() {
  location.href = location.href.replace('[sort_order]=DESC', '[sort_order]=ASC').replace(sortRegex, '[sort_by]=price');
}
function dateHighZ() {
  location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=date');
}
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('priceHighZ').addEventListener('click', priceHighZ);
  document.getElementById('priceLowZ').addEventListener('click', priceLowZ);
  document.getElementById('dateHighZ').addEventListener('click', dateHighZ);
});
</script>

只有在第一次加载页面时才会有效，然后重新加载页面。它在第一次加载时不起作用。

DOMContentLoaded是否存在问题，只有在重新加载页面后才会导致此问题？

我looked at this但不确定如何将此示例应用于上面的代码。

Answer 1

您可以使用jQuery .ready（）事件来确保在执行脚本之前加载DOM（如链接示例中所示）。但是使用wordpress，您可以使用jQuery而不是别名$。可以使用带有wordpress的别名$，例如添加var $ = jQuery.noConflict();：

<script type="text/javascript">

var $ = jQuery.noConflict();

$(document).ready(function() {

    var sortRegex = /\[sort_by\]=\w*/;
    function priceHighZ() {
        location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=price');
    }
    function priceLowZ() {
        location.href = location.href.replace('[sort_order]=DESC', '[sort_order]=ASC').replace(sortRegex, '[sort_by]=price');
    }
    function dateHighZ() {
        location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=date');
    }
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('priceHighZ').addEventListener('click', priceHighZ);
        document.getElementById('priceLowZ').addEventListener('click', priceLowZ);
        document.getElementById('dateHighZ').addEventListener('click', dateHighZ);
    });

});

</script>

您可以使用jQuery语法而不是纯javascript替换例如：
document.getElementById('dateHighZ')…将其替换为$('#dateHighZ')…。

Answer 2

确保您以点击事件绑定的ID未以异步方式加载到DOM中。

Answer 3

听起来你的javascript在页面加载之前正在运行。但是当你刷新页面从本地加载并且页面/元素在脚本之前就准备好了。根据MDN：

初始HTML文档具有时触发DOMContentLoaded事件已完全加载和解析，无需等待样式表，图像和子帧完成加载。一个非常不同的事件 - 负载 - 应仅用于检测完全加载的页面

给它一个这样的机会

document.addEventListener('load', function () {
  ...
}

Javascript在页面重新加载时运行

3 个答案: