Скрыть данные с помощью Jquery

Question

У меня есть пять кнопок, которые содержат разные данные

$(".Datanewpost").click(function() {
  $(".data).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
  <div id="Datanewpost">
    Data 1
    <div class="data"> Helol</div>
  </diV>
  <div id="Datanewpost">
    data 2
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 3
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
</div>

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

ПРИМЕЧАНИЕ. Я хочу иметь возможность скрывать или показывать по отдельности

Answer 1

Если у вас есть несколько одинаковых элементов, вы должны использовать class вместо id, как показано ниже:

$(".Datanewpost").click(function () {
  $(this).find(".data").toggle();
});

.Datanewpost {
  padding: 10px;
  background-color: #f7f7f7;
  margin: 5px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
  <div class="Datanewpost">
    Data 1
    <div class="data"> Helol</div>
  </diV>
  <div class="Datanewpost">
    data 2
    <div class="data"> Helol</div>
  </div>
  <div class="Datanewpost">
    data 3
    <div class="data"> Helol</div>
  </div>
  <div class="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
  <div class="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
</div>

Answer 2

Вы можете использовать так:

$(".Datanewpost").click(function() {
  $(this).find(".data").toggle();

});

Answer 3

Идентификатор должен быть уникальным в документе, используйте вместо него класс.Вы можете использовать $(this).find('.data') для переключения определенного элемента:

$(".Datanewpost").click(function(){
  $(this).find('.data').toggle();
});

.data{color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
   <div class="Datanewpost">
      Data 1
      <div class="data">  Hello</div>
   </diV>
   <div class="Datanewpost">
      Data 2
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 3
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 4
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 5
      <div class="data">  Hello</div>
   </div>
</div>

Как и в комментарии, вы просили закрыть открытие div при нажатии другого, просто переберите все .data, кроме текущегоодин.Затем проверьте свойство display='block', чтобы установить для него значение display='none':

$(".Datanewpost").click(function(){
  $(this).find('.data').toggle();
  var current = $(this).find('.data');
  $('.data').not(current).each(function(i, el){
    if(this.style.display=='block')
      this.style.display = 'none';
  });
});

.data{
  color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
   <div class="Datanewpost">
      Data 1
      <div class="data">  Hello</div>
   </diV>
   <div class="Datanewpost">
      Data 2
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 3
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 4
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 5
      <div class="data">  Hello</div>
   </div>
</div>