如何在多个类和 javascript 中显示内容

Question

我正在将 tinymce 用于文本区域，我想计算其中的字符。现在我使用这个代码：

<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>


<script type="text/javascript">      
    tinymce.init({
        selector: '.tinymce',
        width: 400,
        setup: function (ed) {
            ed.on('keyup', function (e) {
                var count = CountCharacters();
                var x = $(".character_count");
                x[0].innerHTML = "Characters: " + count;
            });
        }
    });
   
    function CountCharacters() {
        var body = tinymce.activeEditor.getBody();
        var content = tinymce.trim(body.innerText || body.textContent);
        return content.length;
    };      
</script>

这很好用，除了字符数只显示在第一个 div 中（因为 x[0]

无论我输入什么文本区域，是否可以显示 div <div class="character_count"></div> 中的字符？

Answer 1

是的，将此行 x[0].innerHTML = "Characters: " + count; 替换为此

x.each( function() { $(this).text("Characters: " + count); });

const p = $("p")
$("input").on("input", function(e) {
  p.each(function() {
    $(this).text(e.target.value)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" />

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

如何在多个类和 javascript 中显示内容

how to show content in multiple classes with javascript

javascript

tinymce

innerhtml

如何在多个 类 和 javascript 中显示内容

how to show content in multiple classes with javascript

javascript

tinymce

innerhtml

如何在多个类和 javascript 中显示内容