jquery - 基于 HTML 标签的动态 jQuery

Question

我有这样的 HTML 代码:

<li><input type="hidden" value="001" class="block-hidden-input" />
    <a href="#" id="manage-1" class="manage-content-link">
        <img src="images/web-block/web-block1.jpg"/>
        <span class="orange-notice">Click to Edit Content</span>    
    </a>
</li>

<li><input type="hidden" value="002" class="block-hidden-input" />
    <a href="#" id="manage-2" class="manage-content-link">
        <img src="images/web-block/web-block2.jpg"/>
        <span class="orange-notice">Click to Edit Content</span> 
    </a>
</li>

每个 li 标签都有唯一的 id，其格式如下:id="manage-X"。每个用户可以有多个li标签，所以它是动态的。

另一方面，我需要这个 jQuery 来处理 li 标签:

$('#manage-1').click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("file-001.php");
    e.preventDefault();
});
$('#manage-2').click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("file-002.php");
    e.preventDefault();
});

这个 jQuery 看起来太糟糕了。因为它是静态的，如果我有 5 个 li 标签，意味着我必须复制粘贴 5 次。我不知道如何在 jQuery 上使其动态。

另外，“file-001.php”和“file-002.php”是基于li的值。所以，它必须是这种格式的 file-XXX.php (将 XXX 替换为 li 的值)。我想这一定和RegEx有关。但我不知道该怎么做...

知道如何基于 li 标签使 jQuery 动态化吗？谢谢!

Answer 1

尝试将选择器更改为基于类的。然后您只需要一种方法来确定要加载哪个文件。以下示例假设隐藏输入的值包含要加载的文件编号:

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[type="hidden"].block-hidden-input').val();
    self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php");
    e.preventDefault();
});