单击时显示指定元素的功能答案

【问题标题】：Function which display specified element on click单击时显示指定元素的功能
【发布时间】：2019-08-19 03:58:03
【问题描述】：

我在优化我的 js 文件时遇到了一些问题。

现在我遇到了一个问题：我需要使用一个函数来隐藏图标和显示段落，一个接一个。我使用了“每个”和“这个”，但不知道如何仅在点击的列中显示“p”，而不是在每个人中显示“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 完全是一场灾难，但不知道该怎么做。

【问题讨论】：

标签： javascript onclick this each

【解决方案1】：

最初，您可以使用 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();

【讨论】：

【解决方案2】：

您可以简化代码以隐藏所有 <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:

【讨论】：

谢谢！我刚刚修改了你的代码并且运行良好:)