Несколько модальных оверлеев jQuery с уникальными идентификаторами

Question

Я немного застрял в этом - я использую шорткод Wordpress с плагином для модального наложения, чтобы вставить несколько наложений в редактор содержимого. Однако я стараюсь не повторять мой код jQuery несколько раз для каждого идентификатора.

Как вы можете видеть в шорткоде, я могу установить идентификатор наложения в редакторе Wordpress следующим образом:

Короткий номер

[osu_overlay linktext="Text for link" oid="1"] ... content for overlay ... [/osu_overlay]

Это создает следующую разметку HTML:

HTML

<a id="overlaylink-1" class="overlaybox" rel="overlaybox-1" href="javascript:void(0);">Text for link</a>
<div id="overlaybox-1" class="overlaybox" style="display:none;"> ... content for overlay ...</div>

Это jQuery, который я не хочу повторять для каждого идентификатора, т.е. для overlaylink-1, overlaylink-2 и т. Д.

JQuery

// Check if .overlaylink exists first
if($("#overlaylink-1").length == 0) {
    // #overlay-link-1 doesn't exist
} else {
    // Start overlay
    $('#overlaylink-1').click(function(){
        function dialogFadeIn() {
            dialogFadeIn.data.fadeIn('slow');
        }
        $("#overlaybox-1").modal({
            persist: true,
            onOpen: function(dialog) {
                dialog.overlay.fadeIn('medium', function () {
                    dialog.data.hide();
                    dialog.container.show()
                    dialog.data.fadeIn('medium');
                });
            }
        });
    });
}

Есть ли способ написания приведенного выше кода jQuery, чтобы он учитывал все идентификаторы, например, "overlaylink-x" и overlaybox-x ", где x - любое число?

Спасибо за любую помощь

Осу

- * - РЕДАКТИРОВАТЬ - * -

Вот последний код jQuery - я обновил HTML и Shortcode, добавив rel="", который необходим для работы этого кода плагина jQuery. Спасибо @DingoEatingFuzz за это решение (ниже).

Новый JQuery

// Check if .overlaylink exists first
if($(".overlaylink").length == 0) {
    // nada bc doesn't exist
} else {

    // Get Box to overlay from link rel
    var link = $('overlay-link-1'),
        box = $('#' + link.attr('rel'));

    // Plugin for showing overlay
    (function($) {
        $.fn.osuModal = function(options) { 
            // $.fn is the jQuery plugin object
            // make sure to loop in case the selector specified returns more than one object
            // make sure to return to support function chaining
            return this.each(function() {
                var $this = $(this);
                $this.click(function() {
                    function dialogFadeIn() {
                        dialogFadeIn.data.fadeIn('slow');
                    }
                    $('#' + $this.attr('rel')).modal({
                        persist: true,
                        onOpen: function(dialog) {
                            dialog.overlay.fadeIn('medium', function() {
                                dialog.data.hide();
                                dialog.container.show();
                                dialog.data.fadeIn('medium');
                            });
                        }
                    });
                }); // End '$this.click(function()'
            }); // End 'return this.each(function()'
        }
    })(jQuery);

    // Run the plugin
    $('.overlaylink').osuModal();

}

WP шорткод PHP

Это в случае, если кто-то хочет сделать то же самое в Wordpress (вы помещаете это в свой файл functions.php):

// Shortcode for overlays
function osu_overlay($atts, $content = null) {
    extract(shortcode_atts(array('linktext' => '#', 'oid' => '#'), $atts));
    return '<a class="overlaylink" id="overlaylink-' . $oid . '" rel="overlaybox-' . $oid . '" href="javascript:void(0);">' . $linktext . '</a><div class="overlaybox" id="overlaybox-' . $oid . '" style="display:none;">' . do_shortcode($content) . '</div>';
}
add_shortcode('osu_overlay', 'osu_overlay');

Answer 1

Хотя есть способы сделать то, что вы просите, я думаю, что вы создаете для себя проблему, которую можно избежать с помощью разметки.

Я бы сослался на div в a пометить как это:

<a href='#' id='overlay-link-1' rel='overlaybox-1'>Text For Link</a>

Таким образом, селектор для поля может быть получен по ссылке.

var link = $('overlay-link-1'),
    box = $('#' + link.attr('rel'))
;

Сейчас id из div и id а также rel тега привязки не важны, пока они совпадают. Последний шаг - абстрагирование модальной функции в плагин для простого интерфейса.

(function($) {
    $.fn.osuModal = function(options) { // $.fn is the jQuery plugin object
        // make sure to loop in case the selector specified returns more than one object
        // make sure to return to support function chaining
        return this.each(function() {
            var $this = $(this);
            $this.click(function() {
                function dialogFadeIn() {
                    dialogFadeIn.data.fadeIn('slow');
                }
                $('#' + $this.attr('rel')).modal({
                    persist: true,
                    onOpen: function(dialog) {
                        dialog.overlay.fadeIn('medium', function() {
                            dialog.data.hide();
                            dialog.container.show();
                            dialog.data.fadeIn('medium');
                        });
                    }
                });
            }
        }
})(jQuery);

Наконец, назовите модалы, как вам хочется.

$('.generic-class-for-all-modals').osuModal();
$('#specific-modal').osuModal();
$('#generated-modal-1').osuModal();
$('#generated-modal-1 #generated-modal-2').osuModal();

Answer 2

Чтобы найти элемент с id который начинается с заданной строки:

$('a[id^="overlaylink"]')
$('div[id^="overlaybox"]')

Обратите внимание, что я использую тип элемента, чтобы уменьшить количество элементов, которые jQuery или браузер должны искать, чтобы найти соответствующие элементы. Это не обязательно, но немного снижает нагрузку.

Учитывая, что эти функции обязательно возвращают массивы элементов, вам придется перебирать этот массив с each() а затем использовать индекс (each(function(index){ /*...*/})) для определения конкретных элементов, если само число является релевантным (я предполагаю, что #overlaylink-1 вероятно, должен показать / действовать #overlaybox-1).

Рекомендации:

• Селектор атрибутов начинается с: attribute^="value",
• each(),