Question

我试图将类重新应用于通过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 - ＆gt; 'li-one'得'隐藏'类 - ＆gt;用户点击ajax - ＆gt; ajax加载所有'li-one'和'隐藏'类

用户点击link_2 - ＆gt; 'li-two'得'隐藏'类 - ＆gt;用户点击ajax - ＆gt; ajax加载所有'li-two'和'隐藏'类

用户点击link_3 - ＆gt; 'li-three'得'隐藏'类 - ＆gt;用户点击ajax - ＆gt; ajax加载所有'li-three'和'隐藏'类

它应该像过滤器一样工作。

Answer 1

对我而言，似乎每次加载具有类li-one的内容时，您都不希望它显示出来？

为什么不在默认情况下更改li-one的隐藏样式，然后只在需要时显示？

Answer 2

使用AJAX中的回调函数将.addClass添加到相关链接。

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

查看正在调用的函数（data）{}

Answer 3

是，

在加载数据并将其添加到文档并再次调用时进行回调：$（'。li-one'）。addClass（'hide'）;

但是，让我优化代码：

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

$(document).ready(function() {
    startList()
});

加载数据时，您可以致电startList()以使新数据正常运行。

将类重新应用于ajax加载的内容

3 个答案: