我在优化js文件时遇到了一些问题。
现在,我遇到了一个问题:我需要使用一个函数来逐个隐藏Icon和显示段落。我使用了“ each”和“ this”,但不知道如何仅在单击的列中显示“ p”,而不是在所有人中显示
function uInNumbers() {
let itemsInColumn = $('.column i');
let pInColumn = $('.column p');
if (itemsInColumn.is(':visible')) {
itemsInColumn.each(function() {
$(this).on("click", function() {
$(this).toggle();
pInColumn.css({
"display": "inline-block"
});
})
});
}
if (pInColumn.is(":visible")) {
pInColumn.each(function() {
$(this).on('click', function() {
$(this).toggle();
itemsInColumn.css({
"display": "inline-block"
});
})
});
}
}
uInNumbers();
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
我知道pInColumns完全是灾难,但不知道该怎么做。
答案 0 :(得分:0)
最初,您可以使用CSS隐藏所有 p 元素。根据您的HTML,您可以通过以下方式简单地使用jQuery的.next()
和.toggle()
:
$('.column i').click(function(){
$(this).next('p').toggle();
});
p{
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
我需要使用一个功能来隐藏图标并显示段落...
如果您真的想隐藏图标,请尝试
$(this).hide().next('p').toggle();
答案 1 :(得分:0)
您可以简化代码以隐藏所有<p>
元素,然后仅显示与单击图标相邻的元素:
$('.column .fa.fa-phone').click(function(){
$('.column p').hide();
$(this).closest('.column').find('p').show();
});
.column p{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="column">
<i class="fa fa-phone fa-4x"></i>
<p>Lorem ipsum dolor sit amet.</p>
</div>
Now I've stucked at one problem: I need to use one function to hide Icon and display paragraph, one by one. I used "each" and "this", but have no idea how to display "p"only in clicked column, not in everyone. Here is the code: