jquery - css 已更改 - 插入的元素不可见

Question

title 最初是隐藏的。

它的 css 已更改(点击 btnview)但新插入的 title(点击 btninsert)不可见？

如何通过插入使其自动可见(如果之前点击了btnview)？

当然可以通过 $('.title').show() 来完成，但是 $('.title').css(.. .) 功能？

$('.btnview').on('click', function(){
$('.title').css('display', 'block');
});

$('.btninsert').on('click', function(){
var str = "<div class='title'>lorem</div>";
$(str).insertBefore($('.title').eq(0));
});

.title{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='title'>lorem</div>
<div class='title'>lorem</div>
<br>
<button class='btnview'>VIEW</button>
<button class='btninsert'>INSERT</button>

Answer 1

您可以检查前面的.title 的可见性，然后使用.show() 或.css('','') 来显示/隐藏添加的标题。

$('.btnview').on('click', function(){
$('.title').css('display', 'block');
});

$('.btninsert').on('click', function(){
var str = "<div class='title'>lorem</div>";
if($('.title').eq(0).css("display")=='block'){
  $(str).insertBefore($('.title').eq(0)).css('display','block'); // or .show()
}
else{
  $(str).insertBefore($('.title').eq(0))
}
});

.title{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='title'>lorem</div>
<div class='title'>lorem</div>
<br>
<button class='btnview'>VIEW</button>
<button class='btninsert'>INSERT</button>