javascript - 使用Tagsinput Bootstrap在console.log上重复的值

我对Tagsinput Bootstrap数组有问题，我将项目添加到tagsinput字段并调用事件itemAdded。如果我添加两个或多个项目，console.log会显示类似的重复值：

0: (2) ["white", "black"]
1: (2) ["white", "black"]

我只希望它向我显示一个值，例如：0: (2) ["white", "black"]如果我在tagsinput字段中添加两个项目。

如果我有两行“标签”输入，如下面的图像所示，我想console.log像这样显示给我

0: (2) ["white", "black"]
1: (2) ["10", "200"]

我该如何解决？这是我的代码笔：https://codepen.io/LinhNT/pen/WNvmygx

$(document).ready(function () {
    $('.js_add_property').click(function () {
        var wraper = $('#js_add_property_wraper');
        addProperty(wraper);
    });

    var arr = [];
    $(document).on('itemAdded','.tags-input', function(event) {
        var items = $(this).tagsinput('items');
        arr.push(items);

        console.log(arr)
    });
});

function addProperty(wraper) {
    var template = `<div class="row property-row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Tags</label>
                                <input type="text" class="tags-input">
                            </div>
                        </div>
                    </div>`;
    wraper.append(template);

    $('.tags-input').tagsinput();
}

.bootstrap-tagsinput {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bootstrap-tagsinput input {
    padding: 0;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-info {
    background-color: #5bc0de;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<div class="display-list">
  <div id="js_product_name" data-name="Product name" data-code="51030300708" data-import-price="280000.00" data-list-price="325000.00" data-price="294000.00"></div>
  <div id="js_add_property_wraper"></div>
  <button class="btn btn-primary js_add_property">Add property</button>
</div>

最佳答案

您需要检查阵列是否已经添加。像这样：

$(document).ready(function () {
    $('.js_add_property').click(function () {
        var wraper = $('#js_add_property_wraper');
        addProperty(wraper);
    });

    var arr = [];
    $(document).on('itemAdded','.tags-input', function(event) {

        var items = $(this).tagsinput('items');
        if (!arr.includes(items)){
          arr.push(items);
        }

        console.log(arr)
    });
});

function addProperty(wraper) {
    var template = `<div class="row property-row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Tags</label>
                                <input type="text" class="tags-input">
                            </div>
                        </div>
                    </div>`;
    wraper.append(template);

    $('.tags-input').tagsinput();
}

.bootstrap-tagsinput {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bootstrap-tagsinput input {
    padding: 0;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-info {
    background-color: #5bc0de;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<div class="display-list">
  <div id="js_product_name" data-name="Product name" data-code="51030300708" data-import-price="280000.00" data-list-price="325000.00" data-price="294000.00"></div>
  <div id="js_add_property_wraper"></div>
  <button class="btn btn-primary js_add_property">Add property</button>
</div>

关于javascript - 使用Tagsinput Bootstrap在console.log上重复的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61075334/