Javascript jQuery泛化动态选择器输入

我的情况是，我需要在整个页面中使用

functionalDescription\u IDNUMBER

格式的动态ID，并且我需要根据所单击对象的

IDNUMBER

来确定某些区域的目标。但是，我不确定如何泛化该函数，以便不必为每个唯一ID生成相同的代码（例如，它可能以ABC、DEF、XYZ、asfSa1s3d6fZ等结尾）

例如：

我想概括的jQuery函数（在本例中，XYZ是动态生成的ID号）

对于给定的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>

---

另一种方法是基于容器。然后，所有选择器都将基于类，在

中有一个活动选择器，而不是全局唯一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>

您可以使用

^=

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

例如：

---

或者使用相同的

split（）

逻辑，将事件附加到

videoThumbnail

类

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

---

示例：

是一种很好的模板化标记的方法，但有一些小的变化。另外，请查看这个字符串生成器

谢谢亨特！这也给了我更多的话题来阅读

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