Question

我希望隐藏所有id＃text-field的元素（如果浏览器支持JS，那就是为什么它应该用JS隐藏）。但是不要让它与使用这种方式创建的元素一起工作：

// Add post
$(document).on('click', 'a.add-post', function(event)
{
    // Create content based on a hidden item
    var newcontent = $('.type-post#post_id-hid-0').html();
    content = '<li class="type-post">' + newcontent + '</li>';

    // Place new content
    $('.posts-list > li.iteration-0').last().after(content);

    // Load necessary JS
    load_page();

    event.preventDefault();
});

我的 load_page（）功能：

$(function()
{
    function load_page()
    {
        $('#text-field').hide();
    }

    load_page();
}

Answer 1

对文本字段使用类而不是ID，每个元素的ID都是唯一的，而为此可以再次使用类。

Answer 2

一种轻量级解决方案，不需要任何JS执行，并且在首次加载时不会导致“跳跃”界面，并且元素会在用户眼前消失。

CSS：

#text-field{display:hidden;}

HTML：

<noscript>#text-field{display:block;}</noscript>

Answer 3

你必须做两件事：

function load_page(){ //<----put this in global scope
   $('.text-field').hide(); //<---hide it with class name
}
$(function(){
   load_page();
});

所以现在你页面的某个地方你可能有<input type='text' id='text-field' />这里你可以用这种方式改变你的元素ID：

<input type='text' class='text-field' />

Answer 4

如果你可以用你插入的动态页面相关类替换classname，这应该会有所帮助：

$(".classname[id='text-field']").hide();

或

$(".classname[id='text-field']").attr("style", "display:none");

如何使用JS隐藏动态创建的元素？

4 个答案:

CSS：

HTML：