JS to show/hide 一个基于外部文件中文本的元素

Question

首先让我说，如果有更好的方法来实现我的目标，请告诉我。

我为一家餐馆创建了一个网站。它使用一个简单的 PHP CMS 来创建导入到网站几个不同区域的文本文件。其中之一是菜单。

他们可以从他们的 CMS 中更改 "holiday menu" link 的文本，但是当应该隐藏此菜单时，只需删除 link 的文本（通过 CMS）就可以了一个空的可点击 space.

当外部文件中没有文本时，我可以使用JS隐藏这个link吗？我试过：

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "/dynamic/holiday.txt", true);
txtFile.onreadystatechange = function() {
  if (txtFile.length > 1) {  
         $('.holiday').show();
    }
    else {
        $('.holiday').hide();
    }
  }

和

 $('.holiday').each(function() {
    var len = $('.holiday').text().length  
    if(len > 1){
        $('.holiday').show();
    }
    else {
        $('.holiday').hide();
    }
});

我敢肯定，出于对你们显而易见的原因，这两种尝试都无效。第二个不起作用，因为此元素在 HTML 中始终 技术上 为空，并且无论如何 link 都是隐藏的。我觉得。

我离得还近吗？这是一个应该放弃的过于复杂的解决方案吗？非常感谢您的想法。

Answer 1

您的 GET 请求格式错误且不完整。您没有在请求上调用所需的 .send()，并且在 onreadystatechange 处理程序函数中您需要使用 txtFile.responseText，因为您的 txtFile 变量实际上是请求，而不是文件本身。

但是你最好和最简单的选择，因为你正在使用 jQuery，是使用 $.ajax 或 $.get()，因为它可以处理各种数据类型（text 在你的情况下）自动：

$.ajax({
    url: "/dynamic/holiday.txt",
    dataType: "text",
    success: function (data) {
        if (data.length > 1) {  
            $('.holiday').show();
        }
        else {
            $('.holiday').hide();
        }            
    }
});

JS to show/hide 一个基于外部文件中文本的元素

JS to show/hide an element based on text in an external file

javascript

content-management-system