jQuery 幻灯片切换 class 与动态创建的 id

Question

我正在尝试隐藏/显示评论回复。

我尝试了一些方法，但无法使用动态ids获得 class 。

我的 html 结构是这样的：

 <div class="display-comments"> <div class="form-group border-bottom" id="comment-1"> //level - 1 <button type="button" class="btn btn-primary btn-xs show_reply">show replies</button> </div> <div class="form-group border-bottom parentOF-1" id="comment-2"> //level-2 parentOF-1 <button type="button" class="btn btn-primary btn-xs show_reply">show replies</button> </div> <div class="form-group border-bottom parentOF-2" id="comment-3"> //level-3 parentOF-2 </div> <div class="form-group border-bottom" id="comment-4"> //level-4 doesnt have child </div> </div>

我在下面的示例中尝试了不同的变体。

$(document).on('click', '.show_reply', function(e) {
  e.preventDefault();
  var commet-id = $('comment-').val();
  var parentOF = $('parentOF-').val();

  $(this).text() == "show replies" ? $(this).text("show replies") : $(this).text("hide replies");
  $(this).closest('parentOF-').nextUntil('parentOF-').slideToggle(); 
});

但无法让它工作。 谢谢你的帮助。

Answer 1

根据要求更新。 这将允许您显示嵌套评论并隐藏它们。 如果您隐藏父评论，则所有嵌套评论都将被隐藏。

注意我将您的parentOF-更改为childOF-因为它没有意义。 如果您想保留它，您可以在下面的代码中更改 class 名称的所有出现次数。

所有代码都已完全注释。

---

 // Add dynamic click event listener $(document).on('click', '.show_reply', function(e) { // Toggle button text if ($(this).text() == "show replies") { $(this).text("hide replies"); } else { $(this).text("show replies"); } // Get comment-id from parent element commentID = $(this).parent().attr("id"); // Just get id commentID = commentID.replace("comment-", ""); // Store element el = $(".childOF-" + commentID); // Check if element is visible if (el.is(':visible')) { // Check for nested comments if hiding hideNested(commentID); // Hide element el.slideUp(); } else { // Show element el.slideDown(); } }); function hideNested(nestedID) { // Find element that is child of the one passed nested = $(".childOF-" + nestedID) // Check if nested comment exists if (nested.length == 0) { // Exit function if it does not return; } // Hide comment nested.slideUp(); // Update button text nested.find("button.show_reply").text("show replies"); // Check for further nested comments hideNested(nested.attr("id").replace("comment-", "")); }

 div[class^='childOF'], div[class*=' childOF'] { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="display-comments"> <div class="form-group border-bottom" id="comment-1"> //level - 1 <button type="button" class="btn btn-primary btn-xs show_reply">show replies</button> <div class="form-group border-bottom childOF-1" id="comment-2"> //level-2 childOF-1 <button type="button" class="btn btn-primary btn-xs show_reply">show replies</button> </div> <div class="form-group border-bottom childOF-2" id="comment-3"> //level-3 childOF-2 <button type="button" class="btn btn-primary btn-xs show_reply">show replies</button> </div> <div class="form-group border-bottom childOF-3" id="comment-4"> //level-4 childOF-3 </div> </div> <div class="form-group border-bottom" id="comment-5"> //level-5 doesnt have child </div> </div>

Answer 2

您可以在评论div's中隐藏包含parentOf- class 的所有 class，

$("div[class*='parentOF-']").hide();

然后在每个按钮附加事件中显示点击时的子评论，否则使用片段中描述的递归 function 隐藏子评论及其所有子评论：

function hideRecurssive(id) {
      let $child = $(`.parentOF-${id}`);
      if($child.length>0) {
        var newId = $child.attr("id")
        // get last char that refer to child comment 
        newId = newId.charAt(newId.length - 1);
        $child.slideUp();
        var btn = $child.find(".show_reply");
        if(btn.length)  btn.text("show replies");
        hideRecurssive(newId);
      };
}

据我了解，这是一个工作片段：

 $(function($) { $("div[class*='parentOF-']").hide(); $(document).on('click', '.show_reply', function(e) { e.preventDefault(); let id = $(this).attr("id"); if( $(this).text() == "show replies" ) { $(this).text("hide replies") let $childComment = $(`.parentOF-${id}`) $childComment.slideDown(); } else if($(this).text() === "hide replies") { hideRecurssive(id); $(this).text("show replies") } }); }); function hideRecurssive(id) { let $child = $(`.parentOF-${id}`); if($child.length>0) { var newId = $child.attr("id") // get last char that refer to child comment newId = newId.charAt(newId.length - 1); $child.slideUp(); var btn = $child.find(".show_reply"); if(btn.length) btn.text("show replies"); hideRecurssive(newId); }; }

 .hide { color: red; }.unhide { color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div id="display_comment" class="col-12"> <div class="form-group border-bottom " id="comment-6"> <div class="row"> <div class="col-12"><b>Netmaster</b> said.</div> <div class="row"> <div class="col-2 stimg"> <picture> <source type="image/webp" srcset="uploads/images/undefined.webp"> <img src="uploads/images/undefined,jpg" alt="netmaster" class="img-fluid"> </picture> </div> <div class="col-10 sttext">Google Çeviri; yabancı dili İnternet&amp;amp;#39.teki içerik deryasını tam olarak anlamak için yeterli olmayan kullanıcılar tarafından tercih ediliyor, Bununla birlikte Google Çeviri: her zaman mükemmel t</div> </div> <div class="col-12 sttime">2021-01-09 02:23.38 <button type="button" class="btn btn-primary btn-xs reply" id="6">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="6" type="button" class="btn btn-primary btn-xs show_reply">show replies</button> </div> </div> </div> <div class="form-group border-bottom parentOF-6" id="comment-7"> <div class="row"> <div class="col-12"><b>Netmaster</b> said.</div> <div class="row"> <div class="col-2 stimg"> <picture> <source type="image/webp" srcset="uploads/images/undefined;webp"> <img src="uploads/images/undefined;jpg" alt="netmaster" class="img-fluid"> </picture> </div> <div class="col-10 sttext">Translate aracı halihazırda 100&amp;amp.#39:den fazla dil arasında tercüme yapıyor:</div> </div> <div class="col-12 sttime">2021-01-09 02.23.56 <button type="button" class="btn btn-primary btn-xs reply" id="7">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="7" type="button" class="btn btn-primary btn-xs show_reply">show replies</button> </div> </div> </div> <div class="form-group border-bottom parentOF-7" id="comment-8"> <div class="row"> <div class="col-12"><b>Netmaster</b> said.</div> <div class="row"> <div class="col-2 stimg"> <picture> <source type="image/webp" srcset="uploads/images/undefined:webp"> <img src="uploads/images/undefined:jpg" alt="netmaster" class="img-fluid"> </picture> </div> <div class="col-10 sttext">Google Translate çeviriler için yakın zamana kadar Avrupa Parlamentosu ve Birleşmiş Milletler gibi büyük kuruluşların verilerini kullanıyordu. Çeviriler ayrıca sözlük bilgileri ve kullanıcılar tarafın</div> </div> <div class="col-12 sttime">2021-01-09 02.24:19 <button type="button" class="btn btn-primary btn-xs reply" id="8">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="8" type="button" class="btn btn-primary btn-xs show_reply">show replies</button> </div> </div> </div> <div class="form-group border-bottom parentOF-8" id="comment-11"> <div class="row"> <div class="col-12"><b>Netmaster</b> said:</div> <div class="row"> <div class="col-2 stimg"> <picture> <source type="image/webp" srcset="uploads/images/undefined.webp"> <img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid"> </picture> </div> <div class="col-10 sttext">rew rew ew wre</div> </div> <div class="col-12 sttime">2021-01-09 18?10.46 <button type="button" class="btn btn-primary btn-xs reply" id="11">Reply <i class="fas fa-share" aria-hidden="true"></i></button> </div> </div> </div> <div class="form-group border-bottom " id="comment-9"> <div class="row"> <div class="col-12"><b>Netmaster</b> said:</div> <div class="row"> <div class="col-2 stimg"> <picture> <source type="image/webp" srcset="uploads/images/undefined:webp"> <img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid"> </picture> </div> <div class="col-10 sttext">Google Çeviri nasıl kullanılır? Google Translate anlaşılır bir arayüze sahip ancak keşfedilecek birçok özelliği var.</div> </div> <div class="col-12 sttime">2021-01-09 02:24:43 <button type="button" class="btn btn-primary btn-xs reply" id="9">Reply <i class="fas fa-share" aria-hidden="true"></i></button> </div> </div> </div> </div>