对ajax加载的内容重新应用类

re-apply class to ajax loaded content

本文关键字：应用 新应用 加载 ajax      更新时间：2023-09-26

我正在尝试将类重新应用于通过ajax加载的新内容。

HTML: 

<a href="#" id="link_1">link_1</a>
<a href="#" id="link_2">link_2</a>
<a href="#" id="link_3">link_3</a>
    <a href="#" id="ajax-load">load more</a>
<ul id="list">
    <li class="li-one">one content</li>
    <li class="li-two">two content</li>
    <li class="li-three">three content</li>
</ul>
Jquery脚本:

$(document).ready(function() {
            $('#link_1').live('click', function() {
                $('.li-one').addClass('hide');
            });
            $('#link_2').live('click', function() {
                $('.li-two').addClass('hide');
            });
            $('#link_3').live('click', function() {
                $('.li-three').addClass('hide');
            });
            $('#load-ajax').click(function() {
               $.get('http://link', function(data) {
               $('#list').append(data);
        });
    });
});

Ajax HTML页面代码:

<li class="li-one">one content</li>
<li class="li-two">two content</li>
<li class="li-three">three content</li>

ToDo:

用户点击link_1 -> 'li-one'获取'隐藏'类->用户点击ajax -> ajax加载所有'li-one'与'隐藏'类

用户点击link_2 -> 'li-two'获取'隐藏'类->用户点击ajax -> ajax加载但所有'li-two'与'隐藏'类

用户点击link_3 -> 'li-three'获得'隐藏'类->用户点击ajax -> ajax加载但所有'li-three'与'隐藏'类

它应该像过滤器一样工作

对我来说，似乎每次你加载的内容，有类li-one你不希望它显示?

为什么不直接将li-one的样式默认为隐藏，然后只在需要时显示它?

使用AJAX中的回调函数。addclass到相关链接。

http://www.arashkarimzadeh.com/jquery/5-jquery-add-variables-to-ajax-callback.html

查看正在调用的函数(data){}

是，

当数据被加载并添加到文档中并再次调用:$('.li-one').addClass('hide');

但是，让我优化一下代码:

function startList() {
    $('ul#list li').live('click', function() {
        $(this).addClass('hide');
    });
}
$(document).ready(function() {
    startList()
});

当你加载数据时，你可以调用startList()使新的数据在上面工作

相关文章：