无法使用$(this).next()-jQuery来.removeClass

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()，这会删除它，但如果我有多个带有表情符号选取器的文本区域，它会删除所有

此外，尝试在这里搜索，但这里的想法也不起作用。jquery下一个和这个不工作

对于每个文本区域和创建的div，有一点是唯一的，那就是data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df"可能可以用作选择器，但不知道如何使用它

这是表情选择器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>