jquery使用动态编号打开div

Question

我想使用jQuery打开和关闭div。 但是因为我使用的代码是动态的，并且会在彼此之下重复，所以我需要使用动态ID。

HTML：

<div class="categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>" style="display: none;"> 
    <p>Text</p> 
</div> 

<span class="showcategoryratings" id="review-<?php echo $this->htmlEscape($_review->getId())?>"> 
    <span class="showcategoryratings-text">Per category</span> 
</span> 

我尝试使用这个jQuery的，但我猜的PHP线不工作：

$(document).ready(function() { 
    $('#review-<?php echo $this->htmlEscape($_review->getId())?>').click(function() { 
      $('.categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>').slideToggle("fast"); 
      $(this).toggleClass('active'); 
    }); 
}); 

如何需要正确地编辑呢？

Answer 1

您可以在Javascript中不使用PHP。

$(document).ready(function() { 
    $('.showcategoryratings').click(function() { 
     var categoryId = $(this).attr('id').split('-')[1]; 

     $('.categoryratings-review-'+categoryId).slideToggle("fast"); 
     $(this).toggleClass('active'); 
    }); 
}); 

我认为它的工作原理。

Answer 2

如果你把你的元素分组如下，它会更容易。通过这样做，您根本不需要ID。看一看。

$(document).ready(function() { 
 
    $('.showcategoryratings').on("click", function() { 
 
     $(this).closest(".group").find(".categoryratings-review").slideToggle("fast"); 
 
     $(this).toggleClass('active'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="group"> 
 
    <div class="categoryratings-review" style="display: none;"> 
 
     <p>Text1</p> 
 
    </div> 
 
    
 
    <span class="showcategoryratings"> 
 
     <span class="showcategoryratings-text">Per category1</span> 
 
    </span> 
 
</div> 
 

 
<div class="group"> 
 
    <div class="categoryratings-review" style="display: none;"> 
 
     <p>Text2</p> 
 
    </div> 
 
    
 
    <span class="showcategoryratings"> 
 
     <span class="showcategoryratings-text">Per category2</span> 
 
    </span> 
 
</div> 
 

 
<div class="group"> 
 
    <div class="categoryratings-review" style="display: none;"> 
 
     <p>Text3</p> 
 
    </div> 
 
    
 
    <span class="showcategoryratings"> 
 
     <span class="showcategoryratings-text">Per category3</span> 
 
    </span> 
 
</div>

Answer 3

你可帮了所有的ID与review-开始响应

$('[id^="review-"]').click(function() { 

    $('.categoryratings-' + $(this).attr('id')).slideToggle('fast') ; 

    $(this).toggleClass('active'); 

});