console.log 上的重复值与 Tagsinput Bootstrap

Question

我的 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>

Answer 1

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

$(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>

console.log 上的重复值与 Tagsinput Bootstrap

Duplicate value on console.log with Tagsinput Bootstrap

javascript

jquery

html

console.log