Как сделать JQuery DIV более динамичным?

Question

Как сделать приведенную ниже функцию более динамичной, например, commentLink и commentContainer будут иметь после них идентификатор, подобный этому 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>, не уверенное, опечатка это или нет, но его следует удалить.

Событие click должно быть заключено в $ (document) .ready (function () {...}); так что jquery может точно получить доступ к DOM (так как вы запрашиваете элементы <a> и <div>). У меня проблема с тем, что последний return false; не был достигнут, я подозреваю, что это как-то связано с кодом is (: visible). Какова функция этого блока if / else?