Question

我处于需要在整个页面中使用格式为functionalDescription_IDNUMBER的动态ID的情况，我需要根据IDNUMBER对所点击的对象的定位来定位某些区域。但是，我不确定如何推广该函数，以便我不必为每个唯一ID生成相同的代码（例如，它可以以ABC，DEF，XYZ，asfSa1s3d6fZ等结束）。

示例：

我想概括的jQuery函数（在这种情况下XYZ是动态生成的ID号）...

$("#videoThumbnail_XYZ").click(function() {
    $("#thumbnailDescription_XYZ").fadeOut(300, function() {
        $("#videoPlayer_XYZ").fadeIn(100);
    });
});

对于给定的HTML：

<div id="videoPlayer_XYZ" class="videoPlayer">
    <iframe title="Video Player" type="text/html" width="638" height="390" src="" frameborder="0"></iframe>
</div>
<div id="thumbnailDescription_XYZ" class="thumbnailDescription">
    <div id="videoThumbnail_XYZ" class="videoThumbnail left">
        <img src="images/videoThumbnail.png" />
    </div>
    <!-- more code in here -->
</div>

Answer 1

您可以使用starts-with selector ^=

$("[id^='videoThumbnail']").click(function() {
    var id = $(this).attr("id").split("_")[1];
    $("#thumbnailDescription_" + id).fadeOut(300, function() {
        $("#videoPlayer_" + id).fadeIn(100);
    });
});

示例：http://jsfiddle.net/m67Y7/1/

或使用相同的split()逻辑，将事件附加到videoThumbnail类

$(".videoThumbnail").click(function() {
    var id = $(this).attr("id").split("_")[1];
    $("#thumbnailDescription_" + id).fadeOut(300, function() {
        $("#videoPlayer_" + id).fadeIn(100);
    });
});

示例：http://jsfiddle.net/m67Y7/

Answer 2

另一种可以做到这一点的方法是基于容器。然后，所有选择器都将基于具有<div data-videoid="XYZ">内的实时选择器的类，而不是全局唯一ID。

<div data-videoid="XYZ"> <!-- unique id is stored at parent level -->
    <div class="videoPlayer">
        <iframe title="Video Player" type="text/html" width="638" height="390" src="" frameborder="0"></iframe>
    </div>
    <div class="thumbnailDescription">
        <div class="videoThumbnail left">
            <img src="images/videoThumbnail.png" />
        </div>
    </div>
</div>

Answer 3

jQuery templates是一种模糊标记的好方法，只需稍微改动即可。另外，请查看此jquery random字符串生成器。

jQuery推广动态选择器输入

3 个答案: