jquery javascript 如何在壁橱 div 后显示一些 html

Question

我有 3 个文本区域和 3 个 div，其中应该显示一些 html。

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

当我输入一些文本时，在 div 和 class character_count 我输入的文本区域下方，应该字符被显示。我没有成功:

这是我的js:

tinymce.init({
        selector: '.tinymce',
        width: 400,
        setup: function (ed) {
            ed.on('keyup', function (e) {
                var count = CountCharacters();
                
                $(this).closest(".character_count").text("Characters: " + count); // find the closest div with class .character_count and show the html  
                
            });
        }
    });
   
    function CountCharacters() {
        var body = tinymce.activeEditor.getBody();
        var content = tinymce.trim(body.innerText || body.textContent);
        return content.length;
    };

Fiddle 测试：https://jsfiddle.net/4vron96z/3/

顺便说一句：$(".character_count").text("Characters: " + count); 确实有效，但是 html 显示在所有 3 div 中...

Answer 1

TinyMCE 有一个 wordcount 插件可以告诉你这个而无需计算值。例如你可以这样做：

tinymce.activeEditor.plugins.wordcount.body.getCharacterCount()

...或者...

tinymce.activeEditor.plugins.wordcount.body.getCharacterCountWithoutSpaces()

这是一个运行示例：

http://fiddle.tinymce.com/Gmhaab

Answer 2

tinymce.init({
    selector: '.tinymce',
    width: 400,
    setup: function (ed) {
        ed.on('keyup', function (e) {
            var count = CountCharacters();
            $(this.targetElm).closest('.wrapper')
                .find('.character_count').text("Characters: " + count);
        });
    }
});
   
function CountCharacters() {
    var body = tinymce.activeEditor.getBody();
    var content = tinymce.trim(body.innerText || body.textContent);
    return content.length;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tinymce.cachefly.net/4.2/tinymce.min.js"></script>

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

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

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

好吧，Whosebug 似乎不喜欢 tinymce 库，所以我将它从 runnable 中删除，但这是我在你的 jsfiddle 中使用的版本。

由于 setup 回调中的 this 是一些 tinymce 对象，它不适用于 jQuery。但是，this.targetElm 似乎是为 tinymce 初始化并正在为其处理事件的元素。

因此，使用它，我们可能会使用 $(this.targetElm).next('div') 来获取您的元素，但是，您的下一个元素不是 div。这是一个 <br /> 你在那里。这意味着您可以 next().next('div') 来获得它，但那是丑陋且脆弱的，所以！

您的 html 的修改版本现在在每个文本区域和 div 配对周围都有一个包装器。将标记更改为那样，然后我们可以使用 closest('.wrapper').find('.character_count') 逻辑向上导航到 textarea 和 div 的父元素，然后找到嵌套的 div，无论它所在的位置。

jquery javascript 如何在壁橱 div 后显示一些 html

jquery javascript how to show some html in the closest div after a textarea

javascript

jquery

tinymce

closest