Question

我正在以典型的“发布帖子”形式使用物化芯片，其中我将芯片用于标签字段。都好。

现在，当我在几乎相同的“编辑帖子”屏幕中执行相同操作时，会有所不同，我从数据库中调用帖子已具有的标签，然后将其插入插入芯片的元素中。

我已经解决了这个想法的几个问题，但是当我要删除单击关闭图标的芯片时，不管它是预先存在的标签还是新生成的标签，都行不通。

如果我不使用预先存在的标签/芯片填充芯片的容器，则不会发生此行为。所以我有2个选择：

我一直在努力使关闭图标能够自己填充芯片的容器或
我使用addChip方法，所以如果我让插件生成那些预先存在的标签/芯片，那么所有这些都将得到修复。

第二个选项的问题是我不知道如何使该方法在我的代码中起作用。

选项1

<div id="chips1" class="chips chips-placeholder input-field">
  @foreach($tags as $tag)
    <div class="chip" data-tag="{{$tag}}" tabindex="0">{{$tag}}
      <i class="material-icons close">close</i>
    </div>
  @endforeach
</div>

选项2（不使用foreach填充div）

<div id="chips1" class="chips chips-placeholder input-field">

</div>

和JS

    /* I initialize the chips with a onChipAdd method   
and onDelete method to keep the  variable updated */

    var val = [];
    $('#chips1').chips({
        placeholder: 'Etiquetas...',
        secondaryPlaceholder: '+Etiqueta',
        onChipAdd: function () {
            val = this.chipsData;
            console.log(val);

        },
        onChipDelete: function() {
            val = this.chipsData;
            console.log(val);
        }
    });


    /* ***************************************** */


    /* Here populate the hidden input that is going to deliver the 
    data with the pre-existing chips of Option 1 */

    var chipsArr = [];
    var chipis = $('#chips1 div.chip');

    for (let index = 0; index < chipis.length; index++) {

        chipsArr.push($(chipis[index]).data('tag'));
    }

    $('#chips-values').val(JSON.stringify(chipsArr));

    /* ***************************************** */

    /* Here i push to the array the newly added tags with the val variable */

    $('#publishSubmit').on('click', function (e) {
        e.preventDefault();
        for (let index = 0; index < val.length; index++) {
            chipsArr.push(val[index].tag);          
        }
        $('#chips-values').val(JSON.stringify(chipsArr));
        console.log($('#chips-values').val());

        $('form#postPublish').submit();
    });

Answer 1

我知道您的问题已经存在了一段时间，但是也许可以帮助您。我遇到了完全相同的问题，并按以下步骤解决了这个问题：

我如下创建了筹码容器：

 <div id="chips" class="chips-placeholder"></div>
 <div id="chips_inputcontainer"></div>

然后，我为“ chips_inputcontainer”内部的数据库中的每个现有芯片创建了隐藏的输入。

例如这样的例子：

 <div id="chips_inputcontainer">
      <?php foreach($chips as $chip): ?>
           <input type='hidden' name='chip[previous][<?php echo $chip['id'] ?>]' value='<?php echo $chip['text'] ?>'>
      <?php endforeach; ?>
 </div>

最后，我使用以下JavaScript片段初始化了芯片输入：

<script>
      $('#chips').chips({
            placeholder: 'Enter a tag',
            secondaryPlaceholder: '+Tag',
            onChipAdd: function(e, chip){
                $("#chips_inputcontainer").append("<input type='hidden' name='chip[new][]' value='" + chip.innerHTML.substr(0, chip.innerHTML.indexOf("<i")) +  "'>");
            },
            onChipDelete: function(e, chip){
                $('#chips_inputcontainer input[value="' + chip.innerHTML.substr(0, chip.innerHTML.indexOf("<i")) + '"]').val('**deleted**');
            },
            data: [
                <?php foreach($chips as $chip): ?>
                    {tag: '<?php echo $chip['text'] ?>'},
                <?php endforeach; ?>
            ],
        });
</script>

每次添加新芯片时都会创建此片段，其中包含具有必要数据的隐藏输入。每次删除芯片时，隐藏输入字段的值都设置为“已删除”

所以我知道：

哪些标签是数据库新的
哪些是现有的
现有数据库中有哪些ID
哪些被删除

我希望这会对您有所帮助。

实现芯片和addChip（）方法

1 个答案: