首页 > 解决方案 > 尝试使用 jQuery 隐藏字段,但在显示原始字段几毫秒后将其隐藏

问题描述

我对 jQuery 非常陌生,对高效编码知之甚少。我试图隐藏一个包含“电子邮件”和“电话”的字段并且能够完美地隐藏它但是!但是......它在显示原始字段几毫秒后隐藏了该字段。如果您能够以某种方式阅读它,那么隐藏或删除字段有什么意义,对吧?

这是正在发生的事情 在此处输入图像描述

注意:我正在我的本地主机和 WordPress 平台上尝试它。

这是我正在使用的代码

jQuery(document).ready(function($){

  $(".single-at_biz_dir .atbd_contact_info ul").children().each(function() {
    if ($(this).is(":contains('Phone')") || $(this).is(":contains('Email')")) {
            $(this).hide();
    }
  });
});

我还尝试使用以下代码更改文本,它再次显示原始文本几毫秒,然后更改它。

 jQuery(document).ready(function($){
    $(".single-location .tdb_header_menu li:nth-child(1) .tdb-menu-item-text").text("Home");
});

是否可以在不显示原始内容的情况下加载带有更改的页面?

任何帮助,将不胜感激!

谢谢。

标签: javascriptjquerywordpressperformance

解决方案


如上面的评论所述,这是因为 jQuery 在加载文档之前不会运行,所以这里最好的解决方案是使用 CSS 并定位要隐藏的项目的 id 或类。

如果您不想直接定位这些元素,您可以走“hacky”路线并使用 CSS 隐藏整个无序列表。然后使用您的 jQuery 隐藏特定的列表项,最后再次显示您的列表。

jQuery(document).ready(function($){

  $(".single-at_biz_dir .atbd_contact_info ul").children().each(function() {
    if ($(this).is(":contains('Phone')") || $(this).is(":contains('Email')")) {
            $(this).hide();
    }
  });
  $(".single-at_biz_dir .atbd_contact_info ul").show();
});

推荐阅读