Jquery по щелчку, скрывает и показывает несколько элементов div

ProgramBox

Jquery по щелчку, скрывает и показывает несколько элементов div

Post author:admin
Запись опубликована:1 октября, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Кто-нибудь может мне помочь?

Я хочу скрыть div при нажатии, но другой div все еще активен, этот код на самом деле работает нормально, но этот код менее эффективен и отнимает много времени, есть ли способ упростить его или есть аналогичный способ, при этом я буду вводить не только 3 элемента, но и более 10 элементов

 $(function() {
  $(document).on("click", "div.myDiv", function(e) {
    $('.goo').css('display', 'none');
    $('.goo2').css('display', 'block');
    $('.goo3').css('display', 'block');
  });
})

$(function() {
  $(document).on("click", "div.myDiv2", function(e) {
    $('.goo').css('display', 'block');
    $('.goo2').css('display', 'none');
    $('.goo3').css('display', 'block');
  });
})

$(function() {
  $(document).on("click", "div.myDiv3", function(e) {
    $('.goo').css('display', 'block');
    $('.goo2').css('display', 'block');
    $('.goo3').css('display', 'none');
  });
})

 .myDiv {
  border: 1px solid gray;
  margin: 10px;
}

.myDiv2 {
  border: 1px solid gray;
  margin: 10px;
}

.myDiv3 {
  border: 1px solid gray;
  margin: 10px;
}

.goo {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

.goo2 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

.goo3 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div class="goo"></div>
  Test1
</div>
<div class="myDiv2">
  <div class="goo2"></div>
  Test2
</div>
<div class="myDiv3">
  <div class="goo3"></div>
  Test3
</div>

Ответ №1:

Весь смысл классов, по сравнению с идентификаторами, заключается в том, что они не обязательно должны быть уникальными и могут использоваться повторно, избегая повторения вашего кода.

 const $allGoos = $(".goo");

$(".myDiv").click(function() {
  $allGoos.show();
  $(this).find('.goo').hide();
});

 .myDiv {
  border: 1px solid gray;
  margin: 10px;
}

.goo {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div class="goo"></div>
  Test1
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test2
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test3
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test4
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test5
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test6
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test7
</div>

Ответ №2:

Вам не нужен класс для идентификации каждого элемента. Для этого вы должны использовать id. Но в этом случае вы можете применить набор правил для всех ваших элементов, используя только один или два класса. Итак, используя jQuery, вы можете сократить свой приведенный выше код следующим образом…

 $(".goo").click(function (e) {
  $(".goo").css("display","block")
  $(this).css("display","none")
});

 .myDiv
{
  border:1px solid gray;
  margin:10px;
}
.goo
{
  position: absolute;
  background: rgba(0,0,0,0.5); 
  border-radius: 5px;
  width:90%;
  height: 20px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="myDiv">
    <div class="goo"> </div>
    Test1
  </div>
  <div class="myDiv">
    <div class="goo"></div>
    Test2
  </div>
  <div class="myDiv">
    <div class="goo"></div>
      Test3
  </div>
</body>
</html>

1. Не уверен, почему preventDefault() , потому что вы не отправляете форму. Кроме того, .css("display","block") и .css("display","none") может быть упрощен до .show() и .hide()

2. @Vuien Нет проблем. Вы также можете использовать hide() and show() . jQuery обладает очень полезными функциями. Но я хотел, чтобы вы увидели, что произошло, поэтому я использовал ваш css() подход.

3. @JeremyThille Я использую визуальный код. Я установил ярлыки для jQuery, чтобы он был заполнен самостоятельно. Я удалил его. Спасибо.

4. @JeremyThille Как я уже сказал в своем комментарии к Vuien. Я знаю .hide() и .show() . Я хотел, чтобы он увидел, что произошло, используя его собственный подход.

Ответ №3:

Вы могли бы присвоить всем элементам один и тот же класс «goo». Вот так

   <div class="myDiv">
    <div class="goo"> </div>
    Test1
  </div>
  <div class="myDiv">
    <div class="goo"></div>
    Test2
  </div>
  <div class="myDiv">
    <div class="goo"></div>
      Test3
  </div>

а затем установите значение «все» для отображения по щелчку и установите элемент, который был нажат, чтобы скрыть, используя ключевое слово «this»

 $(function(){
     $('.myDiv').on("click",function(){
         $('.goo').show();
         $(this).find('.goo').hide();
     });    
 })

1. Может возникнуть проблема с подключением обработчика щелчков .goo . Действительно, это в основном фоновые div. Если перед ним что-то есть, оно не будет перехватывать событие щелчка. Пользователь нажмет Test1 , но ничего не произойдет, потому что текст блокирует щелчок на .goo том, что ниже.

Метки: Jquery по щелчку, скрывает и показывает несколько элементов div