时间戳

首页 > 解决方案 > 不能.removeClass 使用 $(this).next() - jQuery

javascript - 不能.removeClass 使用 $(this).next() - jQuery

问题描述

我有一个文本区域，如果它是空的，它的边框会被涂成红色。我在 textarea 上安装了表情符号选择器，它添加了一个 div 来保存选择器。

自动创建的 div 就在 textarea 之后，我试图在用户键入内容后立即删除红色边框。

我拥有的脚本适用于 textarea 本身，但不会将其从包含表情符号选择器的 div 中删除

这就是我所拥有的

<div class="form-group">

<p class="emoji-picker-container"></p>

<textarea name="title" id="title" class="form-control mandatory" rows="3" placeholder="Type your answer here" data-emojiable="converted" data-emoji-input="unicode" style="height: 100px; display: none;" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="original-input"></textarea>

<div class="emoji-wysiwyg-editor form-control mandatory" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="input" placeholder="Type your answer here" contenteditable="true" style="height: 100px;" spellcheck="false"></div>


</div>

这是jQuery

$(document).ready(function() {
        checkInput();
    })

    $('.mandatory').on('input change',checkInput)

    function checkInput()
    {
        $('.mandatory').each(function() {
            if ($(this).val() == '') {

                $(this).addClass('invalid');
                
                } else {
                    $(this).next().removeClass("invalid");
                    
                $(this).removeClass('invalid')}
        })
    }

我已经尝试了所有我能想到next()的......prev()nextAll()$('#emoji-wysiwyg-editor').next()

另外，尝试在这里搜索，这里的想法也没有奏效。 jquery下一个，这不起作用

每个 textarea 和创建的 div 的唯一一件事是data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df"可能可以用作选择器，但不知道如何处理它。

这是表情符号选择器 http://onesignal.github.io/emoji-picker/demo/

这是一个显示问题 的小提琴https://jsfiddle.net/largan/3d7bkwg9/11/

标签： javascripthtmljquery

解决方案

问题似乎是您试图.val()在 div 上使用，但它必须是.text().

您可以使用var $val = $(this).val() || $(this).text(); 它会检测它是否.val()会.text()

演示

$(document).ready(function() {
  checkInput();
})

$('.mandatory').on('input change', checkInput)

function checkInput() {
  $('.mandatory').each(function() {
    var $val = $(this).val() || $(this).text()
    if ($val == '') {
      $(this).addClass('invalid');
    } else {
      $(this).next().removeClass("invalid");
      $(this).removeClass('invalid')
    }
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

<p class="lead emoji-picker-container"></p>

<textarea name="title" id="title" class="form-control mandatory" rows="3" placeholder="Type your answer here" data-emojiable="converted" data-emoji-input="unicode" style="height: 100px; display: none;" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="original-input"></textarea>

<div class="emoji-wysiwyg-editor form-control mandatory" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="input" placeholder="Type your answer here" contenteditable="true" style="height: 100px;" spellcheck="false"></div>


</div>

推荐阅读