jQuery概括動態選擇器輸入

Question

我處於這種情況，我需要在整個頁面中使用格式爲的動態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字符串生成器。