Question

我正在使用以下jQuery代码隐藏并在页面中显示一些HTML元素：

/* Previous
------------------------------------------------------------ */
jQuery(document).ready(function($) {
    $('li.menu-item a').hover(
    function() {
        var $this = $(this);
        $this.css('backgroundImage', $this.css('backgroundImage').replace("_off","_over"));
    },
    function() {
        var $this = $(this);
        $this.css('backgroundImage', $this.css('backgroundImage').replace("_over","_off"));
    });

/* Workarounds
------------------------------------------------------------ */
    var url = window.location.pathname;

    // Hide image on company description
    if(url.indexOf('/view/') >= 0) {
            $('.wp-post-image').css('display','none');
    }

/* Customizations
------------------------------------------------------------ */
    if(url.indexOf('/view/') >= 0) {
        $('td:contains("English First Tianjin")').before('<img src="" />');
    }


});

在此页面中：

http://goldstarteachers.com/esl-jobs-in-china/view/passionate-young-learner-teachers-wanted-in-tianjin-china/

问题是我可以看到我不想在几秒钟内显示的元素。

我怎样才能在页面加载时看不到它们？

Answer 1

IMO，你应该隐藏CSS中的元素，并做一些有条件的＆＃34; show＆＃34;而不是条件＆＃34;隐藏＆＃34;。

通过添加此CSS来执行此操作：

.wp-post-image {
  display:none;
}

并将您的javascript修改为：

var url = window.location.pathname;

// Show image on company description
if(url.indexOf('/view/') == -1) {
        $('.wp-post-image').show();
}

修改仔细观察后，我看到你打电话给＆＃34;隐藏＆＃34; $(document).ready(...)中的方法。这就是为什么需要更长的时间＆＃34;预期＆＃34;隐藏图像在加载页面之前，代码不会运行。移动代码，隐藏您的内容$(document).ready(...)，它应该更好。

我如何才能使它在页面加载时看不到隐藏的元素（jQuery）？

1 个答案: