1

次のような 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 タグを持つことができるため、動的です。

一方、そのliタグを処理するには、このjQueryが必要です:

$('#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はひどく見えます。これは静的であり、li タグが 5 つある場合は、5 回コピーして貼り付ける必要があることを意味します。jQueryで動的にする方法がわかりません。

さらに、「file-001.php」と「file-002.php」は、li の値に基づいています。そのため、ファイルは file-XXX.php の形式でなければなりません (XXX を li の値に置き換えます)。これはRegExに関連しているに違いないと思います。しかし、私はそれを行う方法がわかりません...

そのjQueryをliタグに基づいて動的にする方法はありますか? ありがとう！

4

3 に答える 3

3

セレクターをクラスベースに変更してみてください。次に、ロードするファイルを特定する方法が必要になります。次の例では、非表示の入力の値に、ロードするファイル番号が含まれていることを前提としています。

$('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();
});
于 2012-10-19T01:42:21.557 に答える
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();
});
于 2012-10-19T01:43:18.800 に答える
1

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();
    });
}
于 2012-10-19T01:42:07.703 に答える