如何让 JQuery DIV 切换更动态？

Question

如何使下面的函数更加动态，例如commentLink 和commentContainer 后面会有一个ID，像这样commentLink-2289 commentContainer-2289 因为会有多个列表中的。

Javascript

$(function() {
    $("#commentLink").click(function() 
   {
        $("#commentContainer").toggle();
        if ($("#commentContainer").is(":visible")) 
        {
            $("#commentContainer").load($(this).attr("href"));
        } else 
        {
             $("#commentContainer").html("Loading..."); //Or just leave it as is...
        }
        return false; //Prevent default action
   });
});

HTML

<div id="SystemNews">
 <ul id="dc_news">
   <li>
     <a href="/Home/SystemNews/69" id="commentLink-0">Comments</a>
     <div id='commentContainer-0' style="display:none;">    Loading...</div>
   </div>
   </li>
   </ul> 
</div>

注意：请提供一个工作示例，我通过示例学习最好，谢谢

Answer 1

试试这个：

jQuery(function($){ 
  $("a[id^='commentLink-']").click(function(){
    match = this.id.match(/commentLink-(\d+)/);
    container = $("div#commentContainer-"+match[1])
    container.toggle();
    if (container.is(":visible")) {
        container.load($(this).attr("href"));
    } else {
        container.html("Loading...");
    }
    return false; //Prevent default action
  });
});

但是，如果您可以发布 html 或指向 html 的链接，这会有所帮助，这样我们就可以看到您正在使用的格式是什么。 我不知道你得到的错误是来自我的代码还是你的（因为我的代码只是你的一个模型）。脚本中的错误在哪一行？

---

编辑我的原始代码在 this.id.match 行有一个错误，上面已修复，现在试试吧。

---

编辑： 此外，在您提供的 HTML 中还有一个额外的结束 </div>，不确定这是否是拼写错误，但应该将其删除。

点击事件应该被包裹在 $(document).ready(function(){ ... });以便 jquery 可以准确地访问 dom（因为您正在查询 <a> 和 <div> 元素）。我遇到了一个问题，最后一个return false; 没有到达，我怀疑它与 is(:visible) 代码有关。 if/else 块的预期功能是什么？