Jquery не работает SlideToggle

125

19 января 2020, 01:40

Есть такой код .

$(document).ready(function(){ 
        
         $(".row .block .icon-count #icon").click(function(){ 
              $(".row  .block .text-count").eq($(this).index()).slideToggle('slow'); 
          });  
        
    });

.conatiner 
{ 
  border:1px solid black; 
  padding:1em; 
} 
 
.row 
{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding:1em; 
  border:1px solid black; 
} 
 
.block 
{ 
   display:block 
   text-align:center; 
   border:1px solid black; 
} 
 
.icon-count 
{ 
   display:block 
   text-align:center; 
   border:1px solid black; 
   padding:1em; 
} 
 
#icon 
{ 
   cursor:pointer; 
}    
 
.text-count 
{ 
   display:none; 
   padding:1em; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
        <div class="row"> 
             <div class="block"> 
                 <div class="icon-count"> 
                   <i id="icon">Icon</i> 
                 </div> 
                 <div class="text-count"> 
                      <h1>Icon Text</h1> 
                 </div> 
             </div> 
             <div class="block"> 
                  <div class="icon-count"> 
                   <i id="icon">Icon</i> 
                 </div> 
                 <div class="text-count"> 
                      <h1>Icon Text</h1> 
                 </div> 
             </div> 
             <div class="block"> 
                  <div class="icon-count"> 
                   <i id="icon">Icon</i> 
                 </div> 
                 <div class="text-count"> 
                      <h1>Icon Text</h1> 
                 </div> 
             </div> 
        </div> 
        <div class="row"> 
             <div class="block"> 
                 <div class="icon-count"> 
                   <i id="icon">Icon</i> 
                 </div> 
                 <div class="text-count"> 
                      <h1>Icon Text</h1> 
                 </div> 
             </div> 
             <div class="block"> 
                   <div class="icon-count"> 
                   <i id="icon">Icon</i> 
                 </div> 
                 <div class="text-count"> 
                      <h1>Icon Text</h1> 
                 </div> 
             </div> 
             <div class="block"> 
                  <div class="icon-count"> 
                   <i id="icon">Icon</i> 
                 </div> 
                 <div class="text-count"> 
                      <h1>Icon Text</h1> 
                 </div> 
             </div> 
        </div> 
    </div>

При нажатии иконки id="icon" должно применятся Toggle эффект к class="text-count" . Помогите разобратся .

Answer 1

Недопустимо использовать на одной странице одинаковые id. Следует заменить их на class, и тогда работать всё будет примерно так:

$(".icon-count .icon").click(function(){ 
  $(this).parent().next('.text-count').slideToggle('slow'); 
});

.conatiner 
{ 
  border:1px solid black; 
  padding:1em; 
} 
 
.row 
{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding:1em; 
  border:1px solid black; 
} 
 
.block 
{ 
   display:block 
   text-align:center; 
   border:1px solid black; 
} 
 
.icon-count 
{ 
   display:block 
   text-align:center; 
   border:1px solid black; 
   padding:1em; 
} 
 
.icon 
{ 
   cursor: pointer; 
} 
 
.text-count 
{ 
   display:none; 
   padding:1em; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="row"> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
  </div> 
</div>

Answer 2

Как уже сказали в комментариях, у вас много id="icon", а он должен быть уникальным.
Замените id на class.

А ещё ошибка в самом JQ коде.

$(document).ready(function() { 
 
  $(".row .block .icon-count").click(function() { 
    $(this).closest('.block').find('.text-count').slideToggle('slow'); 
  }); 
 
});

.conatiner { 
  border: 1px solid black; 
  padding: 1em; 
} 
 
.row { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 1em; 
  border: 1px solid black; 
} 
 
.block { 
  display: block text-align:center; 
  border: 1px solid black; 
} 
 
.icon-count { 
  display: block text-align:center; 
  border: 1px solid black; 
  padding: 1em; 
} 
 
.text-count { 
  display: none; 
  padding: 1em; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="row"> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
    <div class="block"> 
      <div class="icon-count"> 
        <i class="icon">Icon</i> 
      </div> 
      <div class="text-count"> 
        <h1>Icon Text</h1> 
      </div> 
    </div> 
  </div> 
</div>

Answer 3

Предоставьте пожалуйста полный код, например тут, и джс можно немного сократить до вида

$(document).ready(function(){ 
 
     $("#icon").click(function(){ 
          $(".text-count").toggleClass('slow'); 
      });  
 
});

Answer 4

Вам необходимо заменить id="icon" (имя не должно повторяться на странице более 1 раза) на class="icon". А далее используем следующий код jQuery (в данном примере используется контекст, а также универсальный метод .on() для установки обработчика событий):

$(function() {
    $( '.icon', '.icon-count' ).on('click', function(){
        $( this ).closest( '.block' ).find( '.text-count' ).slideToggle( 'slow' );
    }); 
});