Question

我有一个文本区域，如果该区域为空，则其边框将显示为红色。我在文本区域上安装了表情符号选择器，它添加了一个div来容纳选择器。

自动创建的div恰好位于文本区域之后，而我尝试实现的目的是在用户键入内容后立即删除红色边框。

我拥有的脚本可以很好地用于文本区域本身，但不能将其从保存表情符号选择器的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()来删除它，但是如果我有多个带有emoji表情符号选择器的文本区域，它将在所有地方将其删除

此外，尝试在此处进行搜索，但此处的想法也无效。 jquery next and this not working

data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df"对于每个文本区域和创建的div来说都是唯一的，它可以用作选择器，但不知道如何处理。

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

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

Answer 1

问题似乎是您试图在div上使用.val()，但是它必须是.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>

无法使用$（this）.next（）.removeClass-jQuery

1 个答案: