jQuery обобщающий ввод динамического селектора - PullRequest
Новая
       5

jQuery обобщающий ввод динамического селектора

2 голосов
/ 14 января 2011

Я нахожусь в ситуации, когда мне нужно использовать динамические идентификаторы в формате functionalDescription_IDNUMBER по всей странице, и мне нужно ориентироваться на определенные области, основываясь на том, что IDNUMBER было для объекта, по которому щелкнули. Однако я не уверен, как обобщить функцию, чтобы мне не приходилось генерировать этот код для каждого уникального идентификатора (например, он может заканчиваться на ABC, DEF, XYZ, asfSa1s3d6fZ и т. Д.).

Пример:

Функция jQuery, которую я хотел бы обобщить (где XYZ - это динамически генерируемый идентификационный номер в данном случае) ... 

$("#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>

Ответы [ 3 ]

2 голосов
/ 14 января 2011

Вы можете использовать селектор запуска с ^=

$("[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/

1 голос
/ 14 января 2011

Другой способ сделать это - контейнер.Тогда все селекторы будут основаны на классе с живым селектором в <div data-videoid="XYZ"> вместо глобального уникального идентификатора. 

<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>
0 голосов
/ 14 января 2011

Шаблоны jQuery - хороший способ шаблонной разметки с небольшими изменениями.Также проверьте этот jquery random генератор строк.

...