如何隐藏通过ajax加载的元素

发布于 2024-11-25 16:19:13 字数 757 浏览 0 评论 0原文

当内容插入 html 页面时，我想隐藏通过 ajax 加载的内容的某些部分。那些 live、bind 和 delegate 仅用于事件，我在这里可以使用什么？谢谢你的帮助。

更新：最初，当页面加载时，相同的部分已经隐藏。

最初，我有这样的内容：

<a id="link" href="">a link</a>
   <ul class="list">
         <li>...</li>
         <li>...</li>
   </ul>

和jquery：

$('.list').hide();
$('#link').moserover(function(){
      $('.list').show();
})

现在，这部分将被替换为从ajax接收到的其他内容，这是相同的，

 <a id="link" href="">another link</a>
   <ul class="list">
         <li>****</li>
         <li>****</li>
   </ul>

但是当将此内容插入到页面时，列表不会隐藏，我的问题是我如何在来自 ajax 时隐藏此列表。希望这是清楚的。

原文

I would like to hide some part of content loaded via ajax, when the content is inserted into html page. those live, bind, and delegate are only for events, what can I use here?? thanks for help.

update: initially, the same part was already hidden when the page loaded.

initially, I have something like this:

<a id="link" href="">a link</a>
   <ul class="list">
         <li>...</li>
         <li>...</li>
   </ul>

and jquery:

$('.list').hide();
$('#link').moserover(function(){
      $('.list').show();
})

Now, this part will be replaced with other content received from ajax,which is the same,

 <a id="link" href="">another link</a>
   <ul class="list">
         <li>****</li>
         <li>****</li>
   </ul>

but when this content is inserted to the page,,, the list is not hidden, my question is how can I hide this list whenever it comes from ajax. hope this is clear.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺渁∝ 2024-12-02 16:19:13

如果您使用 jquery load 那么您可以在回调函数

小示例中执行操作，请

$('#result').load('server.php', function() {

$(".list").hide();  

});

编辑

如果您不这样做不想一次又一次地编写代码，这很好。

所以你可以声明函数并在你想要的地方调用它！
就像

function foo(){

// your code
}

//call it on document load
foo();

 $('#result').load('server.php', function() {    
    foo();    
    });

但在你的情况下它只是单行代码。如果你仍然想简化它，那很简单

var myele =  $(".list");

myele.hide();
myele.show();

希望它有帮助

if you using jquery load then you can perform things in call back function

small example here

$('#result').load('server.php', function() {

$(".list").hide();  

});

Edit

If you don't want to write code again and again thats good.

So you can declare function and call it where every you want !
like

function foo(){

// your code
}

//call it on document load
foo();

 $('#result').load('server.php', function() {    
    foo();    
    });

but in your case it just single line code.if you still like to simplify it, Thats simple

var myele =  $(".list");

myele.hide();
myele.show();

Hope it helps it

回复收藏 0 原文

枕花眠 2024-12-02 16:19:13

如果您希望它在首次加载时默认隐藏，请在样式表中使用 CSS 或在标记中添加内联样式。这将使其默认条件隐藏。如果由于某种原因你不能这样做，那么在通过 ajax 加载它之后，你可以使用 jQuery 隐藏它。

如果您的问题不止于此，请澄清或更详细地解释您想要什么。

假设您要添加的内容是这样的：

<div id="myAjaxContent">My content here</div>

然后，您可以像这样在样式表中添加 CSS，并且该元素将自动隐藏，而无需您执行任何其他操作（不需要 jQuery）：

#myAjaxContent {display: none;}

或者您可以在内容：

<div id="myAjaxContent" style="display: none;">My content here</div>

或者，如果您想用代码显示/隐藏它，您可以在 ajax 调用完成后立即使用它（您的代码通过 ajax 加载它，因此您可以在加载后运行您想要的任何代码）：

$("#myAjaxContent").hide();

.live() 仅适用于点击等事件。您无法使用 .live() 在任何新元素上自动调用 hide()。您可以使用预定义的 CSS（在样式表中或在对象上内联）来执行此操作。

如果您希望稍后可以轻松切换可见性，请在对象上放置一个特定的类：

<div id="myAjaxContent" class="notVisible" style="display: none;">My content here</div>

并有一个预定义的 CSS 样式表规则，如下所示：

.notVisible {display: none;}

稍后，如果您想以编程方式显示该对象，您可以do：

$("#myAjaxContent").removeClass("notVisible");

这会显示出来。

If you want it hidden by default when it first loads, use CSS in a stylesheet or put an inline style on it in the markup. That will make it's default condition hidden. If, there's some reason you can't do that, then right after it is loaded via ajax, you can hide it with jQuery.

If there's more to your question than this, please clarify or explain in more detail what you want.

Suppose the content you're adding is this:

<div id="myAjaxContent">My content here</div>

Then, you could just have CSS in your stylesheet like this and the element will automatically be hidden without you having to do anything else (no jQuery required):

#myAjaxContent {display: none;}

or you could have an inline style on the content:

<div id="myAjaxContent" style="display: none;">My content here</div>

Or, if you want to show/hide it with code, you can use this right after the ajax call completes (it is your code that loads it via ajax so you can run any code you want after it's loaded):

$("#myAjaxContent").hide();

.live() is only for events like clicks. You can't use .live() to automatically call hide() on any new elements. You would use pre-defined CSS (either in a stylesheet or inline on the object) to do that.

If you want it to be easy to toggle visibility later, then put a specific class on the object:

<div id="myAjaxContent" class="notVisible" style="display: none;">My content here</div>

and have a pre-defined CSS stylesheet rule like this:

.notVisible {display: none;}

The, later on, if you want to programmatically show the object, you can just do:

$("#myAjaxContent").removeClass("notVisible");

and that will show it.

回复收藏 0 原文

柠檬色的秋千 2024-12-02 16:19:13

那么您可以尝试让 AJAX 返回要插入的 html 代码字符串。确保您要隐藏的每个项目都有一个 ID 或类别。然后通过一些简单的 .apppend() 或 .html() 调用，您可以将所有代码添加到您的页面中。

从那里开始，就像使用 $('#YourID').css('display', 'none'); 一样简单

回复收藏 0 原文

蔚蓝源自深海 2024-12-02 16:19:13

我的投票是重新考虑你当前的方法。

您正在进行 AJAX 调用并返回整个 HTML 块，该块在结构上与加载页面时页面中已有的内容类似。这看起来效率有点低，并且会产生更多开销（正如您所看到的）。

尝试返回 JSON/XML 中的 li 或 a 值，然后使用 .text() 替换 HTML 中的值。这将在几个方面带来好处；你正在减少你的回复的规模并完成你所需要的。

回复收藏 0 原文

谎言月老 2024-12-02 16:19:13

作为解决方案之一：

$("#myAjaxContent").fadeOut(1);

As one of the solutions:

$("#myAjaxContent").fadeOut(1);

回复收藏 0 原文

眉目亦如画i 2024-12-02 16:19:13

显示：隐藏..通过CSS ..

$(".elementid").css("display","none");

display:hidden .. via css ..

$(".elementid").css("display","none");

回复收藏 0 原文

~没有更多了~

关于作者

独夜无伴

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

如何隐藏通过ajax加载的元素

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如何隐藏通过ajax加载的元素

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。