JQuery: Как заставить Show / Hide работать только с тем же именем ссылки?

Question

У меня есть несколько комментариев на сайте в зависимости от поста, и я хочу только показать / скрыть выбранные комментарии. У меня есть эта проблема и пытаюсь выяснить. Когда я нажимаю на одну опцию, показ / скрытие работает нормально, но это также скрытие или отображение на любом другом содержимом НИЖЕ. Я хочу, чтобы триггер мог показывать / скрывать ТОЛЬКО один комментарий, на который нажали.

Кто-нибудь, как заставить slideToggle () работать таким образом?

Вот текущий код:

jQuery(document).ready(function() 
{
    // Slides container Up and Down on click
    jQuery('div.toggle').click(function(event) {

        // Get the ID by removing the '-'
        $getID = event.target.id.split('-');

        // Get the right content 
        $getContent = jQuery("div#content").parent().find("#"+$getID[1]);


        // Check if content exist 
        if ($getContent.length > 0)
            $getContent.slideToggle('slow');

    });
});

** ЗДЕСЬ есть HTML-код: На самом деле они в цикле.

<?php while (have_posts()) : the_post(); ?>

  <div class="toggle">  
     <ul id="nav">  
      <li><a href="javascript:;" id="option-view">View Comments /a></li> 
       ... 
     </ul>  
  </div>  

  <div id="content">  
   <div id="view"><?php $withcomments = 1; comments_template(); ?></div>  
  </div>  

 <div id="add"> Add a COMMENT here!! </div>


<?php endwhile; ?>

*** Наконец, это работает, потратив почти целый день, чтобы выяснить, КАК с пробами и ошибками. Вот код:

 <div class="toggle"> 
   <ul id="nav">   
    <li><a href="javascript:;" class="option-view" id="option-view">View Comments</a></li>  
    <li><a href="javascript:;" class="option-add" id="option-add">Add Comments</a></li>  
   </ul>

  <div class="content">   
   <div id="view">.......VIEW a comment</div>   
   <div id="add">......Add a COMMENT here!!</div> 
  </div>   

</div>

*** JS код:

jQuery(document).ready(function() 
{
    jQuery('.toggle').bind("click", function(event) { 
        $getID = event.target.id.split('-');    
        //alert($getID)

        jQuery(this).parent().find("#"+$getID[1]).slideToggle('slow');       
        return false; 
    });
});

Спасибо Half-Dead за помощь в выборе правильного пути ...

Answer 1

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

<div id="content">
   <div class="post-container">
       <div class="post"> post </div>
       <div><a href="#" class="toggle">Toggle Comments</a></div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
   </div>
   <div class="post-container">
     ...
   </div>
   ...
</div>

Тогда я бы реализовал функцию комментария переключения как:

$(function() {
     $('.toggle').click( function() {
         $(this).closest('.post-container')
                .find('.comment')
                .slideToggle('slow');
         return false;
     });
});

Основная идея состоит в том, чтобы использовать структуру DOM и относительное расположение элементов в сочетании с декорированием класса CSS, чтобы упростить выбор только тех элементов, с которыми вы хотите иметь дело, а не полагаться на манипуляции со строками и отношения кодирования в идентификаторы элементов. Я считаю, что почти всегда легче полагаться на структуру и тегирование классов, чем использовать манипулирование идентификаторами. Код легче читать и надежнее. Тем не менее, он делает ставку на хорошо структурированный HTML и соответствующую классификацию элементов HTML.

Answer 2

Хорошо, я полагаю, вы хотите сделать что-то вроде этого:

Вы можете поиграть с этим здесь: http://jsbin.com/edahi
HTML:

  <!-- post 1 --> 
  <div class="toggle"> 
    <ul id="nav">   
      <li><a href="#" class="option-view">View Comments</a></li>  
    </ul>    
    <div class="content" style="display:none;">   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>  
    </div>   
    <div id="add">Add a COMMENT here!!</div> 
  </div> 
  <!-- /post 1 --> 


  <!-- post 2 --> 
  <div class="toggle"> 
    <ul id="nav">   
      <li><a href="#" class="option-view">View Comments</a></li>  
    </ul>    
    <div class="content" style="display:none;">   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>  
    </div>   
    <div id="add">Add a COMMENT here!!</div> 
  </div> 
  <!-- /post 2 --> 

и JS:

$('.toggle').bind("click", function() { 
  $(this).find(".content").toggle();       
  return false; 
});

Answer 3

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

Итак, во-первых, измените вашу HTML-разметку, чтобы лучше разделить поведение (javascript) и HTML-код:

<?php while (have_posts()) : the_post(); ?>

  <div class="toggle">  
     <ul id="nav">  
      <li><span  class="viewComment" id="view-345">View Comments </span></li> 
       ... 
     </ul>  
  </div>  

  <div id="content">  
   <div class="commentContent" id="comment-345"><?php $withcomments = 1; comments_template(); ?></div>  
  </div>  

 <div id="add"> Add a COMMENT here!! </div>


<?php endwhile; ?>

Теперь javascript, реализующий желаемое поведение для этой разметки, будет:

   jQuery(document).ready(function() 
    {
    // first, we hide all comments for javascript-enabled people,
// so the added functionality does not prevent people without 
//javascript from seeing your comments.

$('.commentContent').hide();

        // Slides container Up and Down on click
        jQuery('span.viewComment').click(function(event) {

            // Get the ID by removing the '-'
            $getID = this.id.split('-');

            // Get the right content 
            $getContent = jQuery("#comment-"+$getID[1]);


            // Check if content exist 
            if ($getContent.length > 0)
                $getContent.slideToggle('slow');

        });
    });

Здесь вы можете увидеть рабочую демонстрацию .

Answer 4

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

$('.comment').click(function(){
    //hide the one that was visible
    $('#current').removeAttr('id');
    //show the one that was clicked
    $(this).attr('id', 'current');
});


div.comment{
     display:none;
}
div#current .comment{
    display: block
}

Answer 5

Не должно ли что-то подобное работать?

     $('.toggle').bind("click", function() {
         $(this).toggle();
         return false;
     });

or

     $('.toggle').click( function() {
         $(this).toggle();
         return false;
     });