Question

如何使下面的功能更具动态性，例如commentLink和commentContainer之后会有像这样的 commentLink-2289 commentContainer-2289 的ID，因为会有多个列表中的那些。

的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>，不确定这是否是拼写错误，但应将其删除。

click事件应该包含在$（document）.ready（function（）{...}）中;这样jquery就可以准确地访问dom（因为你正在查询<a>和<div>个元素）。我遇到的问题是没有到达最后return false;，我怀疑它与is（：visible）代码有关。 if / else块的预期功能是什么？

如何使JQuery DIV切换更具动态性？

的Javascript

HTML

1 个答案: