Question

我正在尝试检查status_comment_holder是否为空，如果是，那么我想更改comment-container的背景而不必刷新页面，此时，我正在向{{{}}添加评论{1}}并在删除评论时删除评论，我不太确定我是否可以使用css或jquery执行此操作，因此我为两者都标记了标记。

status_comment_holder

我试过了：

<div class="well well-small comment-container" id="comment-container"">
  <div class="status_comment_holder" id="image_comment"></div>
</div>

无济于事，但由于某种原因，它甚至都没有提醒。

Answer 1

只需在jquery中使用伪选择器，而不是使用closest。

$(".status_comment_holder:empty")
  .closest(".well")
  .css("background-color", "red");

.well {
  height: 1.2em;
  background-color: green;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well well-small comment-container">
  <div class="status_comment_holder"></div>
</div>

<div class="well well-small comment-container">
  <div class="status_comment_holder">Should be Green</div>
</div>

Answer 2

这是使用普通香草javascript的一种解决方案：

function checkText() {

var imageComment = document.getElementById('image_comment');
var commentContainer = document.getElementById('comment-container');

if (imageComment.textContent.length === 0) {
    commentContainer.style.backgroundColor = 'rgb(255,0,0)';
}

else {
    commentContainer.style.backgroundColor = 'rgb(191,191,191)';
}

}

var imageComment = document.getElementById('image_comment');
imageComment.addEventListener('input',checkText,false);

#comment-container {
width:400px;
height:100px;
padding:25px;
background-color: rgb(191,191,191);
}

#image_comment {
height:48px;
line-height:48px;
padding:12px;
font-size:48px;
background-color: rgb(255,255,255);
}

<div class="well well-small comment-container" id="comment-container">
<div class="status_comment_holder" id="image_comment" contenteditable="true">Delete this text...</div>
</div>

Answer 3

请使用此：

if ( $('#image_comment').text().length == 0 ) {
    alert("fhfhf");
    $('.well').css('background-color', '#ffffff');
}

Answer 4

$(document).ready(function() {
    if($('#image_comment').is(':empty')){
       alert("fhfhf");
       $('.well').css('background-color', '#ffffff');
    }
});

您可以看到jsfiddle

Answer 5

检查一下： How do I check if an HTML element is empty using jQuery?

你的想法似乎很好，也许div实际上有一个空格？你可以试试像

这样的东西

if($.trim($("selector").html())=='')

或者，正如Adriano Repetti在评论中所说：

if($("selector").children().length == 0)

更节省CPU效率

希望它有所帮助！

Answer 6

搜索change(function())，keyup(function())，text()

等功能/ DOM

希望你能得到你正在寻找的答案。

如果div内的div为空，则更改父CSS的背景颜色

6 个答案: