Блог

Главная - Вопросы по программированию - Функция, которая отображает указанный элемент при нажатии

Функция, которая отображает указанный элемент при нажатии

#javascript #onclick #this #each

#javascript #onclick #это #каждый

Вопрос:

У меня возникла некоторая проблема с оптимизацией моего js-файла.

Теперь я столкнулся с одной проблемой: мне нужно использовать одну функцию, чтобы скрыть значок и отобразить абзац, один за другим. Я использовал «каждый» и «это», но понятия не имею, как отобразить «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 — это полная катастрофа, но понятия не имею, как это сделать.

Ответ №1:

Изначально вы можете скрыть все элементы p с помощью CSS. В соответствии с вашим 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:

Комментарии:

1. Спасибо! Я только что изменил ваш код и работает отлично 🙂