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上动态化。

plus，“file-001.php”和“file-002.php”基于li的值。所以，它必须是这种格式的文件-XXX.php（用li的值替换XXX）。我想这必须与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();
});

Answer 2

请尝试以下操作，请注意"file-00"+this.id.split('-')[1]+".php"仅适用于file-001.php到file-009.php，但您应该可以将其用于大于9的值

$('[id^=manage-').click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("file-00"+this.id.split('-')[1]+".php");
    e.preventDefault();
});

Answer 3

尝试for循环。

for (var i = 0; i < numberOfFiles; i++)
{ 
    $('#manage-'+i).click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("file-00"+i+".php");
    e.preventDefault();
    });
}

基于HTML的动态jQuery <li>标签</li>

3 个答案: