0

所以这就是我想要做的，我有一个按钮，我想在第一次单击它时添加一个外部 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);
    });
});
4

1 回答 1

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/

于 2013-10-17T16:44:26.307 回答