Question

在变量templ上附加了一个小的hmtml代码。在变量templ内，有一个带id注释的div，我想添加跨度文本列表，例如

<small class="note-tag">tag1</small>

在里面。其中tag1是动态文本。这些动态文本当前被警告为l。选定标签是在发表评论时选择的标签。

var tmpl = `<div class="container mb-1">
                {{date('m/d/Y')}}
                <span class="text-gray pull-right">{{Auth::user()->name}}</span>
                <p class="text-gray">
                    <strong>COMMENT</strong>
                </p>
                <div id="note-remarks">
                </div>
            </div>`;
function loadRecentNote(comment,selected_tags){
    $('#recent_note').prepend(tmpl.replace("COMMENT", comment));
    $.each(selected_tags, function( i, l ) {
      alert(l)
    });
}

Answer 1

尝试：您可以将所有选定的标签附加到变量中，然后将其替换为noter-remarks的html

var tmpl = `<div class="container mb-1">
                            {{date('m/d/Y')}}


                    <span class="text-gray pull-right">{{Auth::user()->name}}</span>
                    <p class="text-gray">
                        <strong>COMMENT</strong>
                    </p>
                    <div id="note-remarks">
                    </div>
                </div>`;
function loadRecentNote(comment,selected_tags){
    $('#recent_note').prepend(tmpl.replace("COMMENT", comment));
    var selectedText = '';
    $.each(selected_tags, function( i, l ){
         //alert(l);
         selectedText += '<small class="note-tag">' + l + '</small>';
        });
      $('#recent_note #note-remarks').html(selectedText);
    }

Answer 2

要实现此目的，您可以在map()的数组上使用selected_tags来构建HTML字符串，然后可以将其用于replace()模板中的标记；类似于您的逻辑当前如何为COMMENT工作。试试这个：

var tmpl = `
  <div class="container mb-1">
    {{date('m/d/Y')}}
    <span class="text-gray pull-right">{{Auth::user()->name}}</span>
    <p class="text-gray">
      <strong>COMMENT</strong>
    </p>
    <div id="note-remarks">REMARKS</div>
  </div>`;

function loadRecentNote(comment, selected_tags) {
  var remarksHtml = selected_tags.map(function(tag) {
    return `<small class="note-tag">${tag}</small>`;
  }).join('');
  
  var html = tmpl.replace("COMMENT", comment)
  html = html.replace("REMARKS", remarksHtml)
  
  $('#recent_note').prepend(html);
}

loadRecentNote('Comment foo bar', ['tag #1', 'tag #2']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="recent_note"></div>

Answer 3

var tmpl = `<div class="container mb-1">
              {{date('m/d/Y')}}
              <span class="text-gray pull-right">{{Auth::user()->name}}</span>
              <p class="text-gray">
                <strong>COMMENT</strong>
              </p>
              <div id="note-remarks"></div>
            </div>`;
                
function loadRecentNote(comment, selected_tags) {
  var $tmpl = $(tmpl.replace("COMMENT", comment));  
  $.each(selected_tags, function(i, l) {
    $tmpl.find('#note-remarks').append('<small class="note-tag">' + l + '</small>')
  });  
  $("#recent_note").prepend($tmpl);
}

loadRecentNote('comment', ["tag1", "tag2"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="recent_note"></div>

Answer 4

选择您的元素，对其进行唯一标识，然后使用“ .text（“ arg”）“将其设置为新值 jQuery方法：

$(".note-tag").text("updateText");

更新变量内的div内部文本

4 个答案: