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

Question

Я немного застрял в этом - я использую короткий код Wordpress с модульным плагином оверлей для вставки нескольких наложений в редактор содержимого. Тем не менее, я пытаюсь не повторять код jQuery несколько раз для каждого ID.

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

Shortcode

[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 я не хочу, чтобы повторить для каждого ID, т.е. для 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 - любое число?

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

Осу

- * - EDIT - * -

Вот окончательный код 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 Shortcode 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, который начинает использовать wi й данную строку:

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

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

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

Ссылки:

• attribute-starts-with selector: attribute^="value".
• each().