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').css('display', 'block');仅选择所有具有类title的当前元素并使其显示。它不能用于将来的元素。

相反，您可以创建两个类，一个使用display:none，另一个使用display: block，然后使用addClass和removeClass方法。

Answer 2

没有办法使功能结果对将来添加的元素起作用。最简单的方法是改为使用容器元素，并将规则添加到其子项中，这样任何新的子项也会受到影响。

$('.btnview').on('click', function(){
$('#titles_holder').removeClass('titles-hidden');
});

$('.btninsert').on('click', function(){
var str = "<div class='title'>lorem</div>";
$(str).insertBefore($('.title').eq(0));
});

.titles-hidden .title{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="titles_holder" class="titles-hidden">
<div class='title'>lorem</div>
<div class='title'>lorem</div>
<br>
<button class='btnview'>VIEW</button>
<button class='btninsert'>INSERT</button>
</div>

回答您的特定问题：

在进行<div class="title">时，将$('.title').css('display', 'block');变成<div class="title" style="display:block;">。因此，当您再次添加<div class="title">时，它也没有样式！您可以使用变量来跟踪或弄湿按钮是否被单击，然后直接以正确的样式添加标题。

Answer 3

您可以检查先前.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>

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

3 个答案: