Question

我在html页面上有两个div。这基本上只是html布局上的两列。我在左栏（div）中有一个按钮列表。我用OK和REMOVE glyphicons标记了每个按钮。现在我希望当我点击按钮的REMOVE图标然后它应该删除它否则如果我点击按钮的OK图标然后它应该将它移动到右列（div）。我在这里创建了一个js小提琴：JS Fiddle

HTML：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
    <div class="col-sm-4" style="background-color:lavender;border: solid 1px blue;">
            <div class="text-center">
          <div class="list">
          </div>
</div>      
</div>
    <div class="col-sm-8" style="background-color:lavenderblush;border: solid 1px blue;">
            <div class="accepted">
            </div>
            </div>
</div>

JAVASCRIPT：

var load = function () {
    $.getJSON('https://api.myjson.com/bins/4skih', function (res) {
    $.each(res.data, function (key, val) {
        addTag(val.tag, key);
    });
  });
};

var init = function () {
    load();
    $('.list').on('click', 'button', function () {
        $(this).parent().acceptTag(this);
                $(this).parent().remove();
    });
};

$(document).ready(init);

// Add tag to html.
var addTag = function (tag) {
    $("<div><button class='tag'>" + tag + "</button><span class='glyphicon glyphicon-ok' aria-hidden='true''></span><span class='glyphicon glyphicon-ok' aria-hidden='true''></span></div>").appendTo('.list');
};
var acceptTag = function (tag) {
    $("<div><button class='tag'>" + tag + "</button><span class='glyphicon glyphicon-ok' aria-hidden='true''></span><span class='glyphicon glyphicon-ok' aria-hidden='true''></span></div>").appendTo('.accepted');
};

任何帮助将不胜感激。

Answer 1

我真的对你的代码进行了一些改动，以使其正常工作你很亲密！

<强>解释：
在acceptTag点击的.list事件委派中，您对button功能的调用不正确。
我只是简单地调用了它，因为您已使用addTag函数中的load()函数。
我简化了这个acceptTag函数，因为很明显，你想要将父对象（包装div）发送给它。

因此，所有button定义都已存在。它由tag.html()检索，这是按钮的父HTML内容。您只需要在div中重新包装它。

查看我的 Fiddle

var load = function () {
    $.getJSON('https://api.myjson.com/bins/4skih', function (res) {
    $.each(res.data, function (key, val) {
        addTag(val.tag, key);
    });
  });
};

var init = function () {
    load();
    $('.list').on('click', 'button', function () {
        acceptTag( $(this).parent() );              // Changes here
        $(this).parent().remove();
    });
};

$(document).ready(init);

// Add tag to html.
var addTag = function (tag) {
    $("<div><button class='tag'>" + tag + "</button><span class='glyphicon glyphicon-ok' aria-hidden='true''></span><span class='glyphicon glyphicon-ok' aria-hidden='true''></span></div>").appendTo('.list');
};
var acceptTag = function (tag) {                // Changes here
    $('.accepted').append( "<div>" +tag.html()+ "</div>" );
};

如何使用JQuery将项目/按钮从一个div移动到另一个div？

1 个答案: