Question

所以这就是我想要做的事情，我有一个按钮，我想在第一次点击它时添加一个外部HTML片段。然后在第二次单击相同按钮时删除相同的片段。我对jQuery很新，所以我一直遇到麻烦。

您可以在此处查看完整代码：http://jsfiddle.net/jhoffm34/6xLw8/，但这是我到目前为止的jQuery代码。我知道我以错误的方式解决这个问题，但我不知道如何解决这个问题。

$.get("fragment.html", function(data) {
    $('.js-load__button').click(function(){
        $('#js-load').append(data);
        $('.js-load__button').addClass("js-load__remove");
        $('.js-load__button').attr("disabled", true);
    });
    $('.js-load__remove').click(function(){
        $(data).remove();
        $('.js-load__button').attr("disabled", false);
    });
});

Answer 1

那段代码有点乱。如果你把事情组织起来有点不同，那就变得非常简单了。

首先。更简化的HTML：

<ul id="list">
    <li>
        <figure>
            <img src="http://placekitten.com/300/200"/>
            <figcaption>I Can Haz Kitty?</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://placekitten.com/300/200"/>
            <figcaption>I Can Haz Kitty?</figcaption>
        </figure>
    </li>
</ul>
<button>LOAD MORE</button>

然后是这里的脚本：

var list = document.getElementById('list');
var htmlFragment = '<li class="more"><figure><img src=\"http://placekitten.com/300/200\"/><figcaption>I Can Haz Kitty?</figcaption></figure></li>';

$('button').click(function(evt) {
    evt.preventDefault();

    var more = $(list).find('li.more');

    if (more.length > 0) {
        more.each(function() { $(this).remove(); });
    } else {
        $(htmlFragment).appendTo($(list));
    }
});

因为我无法访问您的AJAX调用，所以我假设某种HTML字符串以“htmlFragment”的形式返回。

我把你的小提琴分开并在这里更新：http://jsfiddle.net/ToddT/XHNrM/

首先单击附加片段然后在jQuery中删除第二个片段

1 个答案: