У меня есть несколько сложная система примечаний, идущая на моем сайте через ajax. Когда появляется новое примечание, у любого есть возможность либо ответить на него, либо закрыть его.
Если они ответят, к заметке присоединяется div с классом ответа, а кнопки ответа и закрытия перемещаются к этой ноте.
Чтобы мои стили были правильными, мне нужно иметь возможность добавить фон в поле, в котором находятся кнопки, когда нет ответов, но удалите этот фон, когда есть ответы.
мой html выглядит так
<div class="noteCont">
<div class="topContainer">
<p class="span8">
<span>{{ $project_note->title }}</span>
</p>
<p class="pull-right note">date</p>
<p class="clearfix"></p>
</div><!--.topContainer-->
<div class="memo">
<p>name</p>
<p class="noteContent"></p>
@if($project_note->is_read)
<p class="pull-right check">
{{ date <i class="icon-thumbs-up"></i> <span>Read</span>
</p>
<div class="replyForm">
<div class="replyButtons">
{{ Form::open(['route'=>['note.update', $project_note->id], 'class' => 'pull-right reply_buttons']) }}
<input type="button" class="btn btn-blue replyBtn" name="" value="Reply" />
<input type="submit" class="btn btn-red closeBtn" name="" value="Close" />
{{ Form::close() }}
<p class="clearfix"></p>
</div> <!-- .replyButtons -->
<div class="reply">
reply content here
</div><!--.reply-->
</div><!--.noteCont-->
Таким образом, в основном, если в отдельной ветке noteCont нет ответных div, добавьте цвет фона в форму ответа. Как мне это сделать? Любая помощь будет замечательной!
Вам нужно перебирать каждую noteCont, добавляя класс, если есть ответы, например:
$('.noteCont').each(function(){
//look for replies.
if(!($(this).find('.reply').length)){
//there are no replies - add a background colour.
$(this).find('.replyForm').css('background-color', 'red');
}
});
ПРИМЕЧАНИЕ. Это добавит только цвет фона - если вам нужно также удалить цвет фона (например, если вы назовёте это снова после добавления ответа), тогда вам нужно разместить там соответствующую инструкцию else
.