고유 한 ID를 가진 여러 개의 jQuery 모달 오버레이

Question

저는 약간의 단점이 있습니다 - 모달 오버레이 플러그인으로 Wordpress 단축 코드를 사용하여 여러 오버레이를 내용 편집기에 삽입하고 있습니다. 그러나 각 ID마다 jQuery 코드를 여러 번 반복하지 않으려 고합니다.

당신이 단축 코드에서 볼 수 있듯이 내가 지금처럼 워드 프레스의 편집기에서 오버레이의 ID를 설정할 수 있습니다

: 이것은 다음과 같은 HTML 태그를 만듭니다

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

단축 코드 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-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'); 
       }); 
      } 
     }); 
    }); 
} 

, overlaylink-1에 대한 각 ID의 예에 대해 반복하고 싶지 않아한다 위의 jQuery 코드는 모든 ID, 즉 'overlaylink-x'및 overlaybox-x '를 나타냅니다. 여기서 x는 임의의 숫자입니까? * - - 편집 - * - 어떤 도움

오스

에 대한

덕분에 여기

최종 jQuery 코드입니다 - 나는 HTML 및 단축 코드 업데이트되었습니다 이 jQuery 플러그인 코드가 작동하는 데 필요한 rel = ""도 포함시켜야한다. 이 솔루션에 대한 @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이 경우에 누군가가 (당신이 당신의 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

당신이 묻는 것을 할 수있는 방법이 있지만 나는 다른 마크 업으로 피할 수있는 문제를 스스로 만들고 있다고 생각합니다.

나는이 같은 a 태그에 div를 참조 할 것 :

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

이 방법은 상자의 선택 링크에서 파생 될 수있다.

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

이제 div과 id 및 앵커 태그의 rel의 id는 그들이 일치로, 중요하지 않습니다. 마지막 단계는 모달 기능을 간단한 인터페이스 용 플러그인으로 추상화하는 것입니다.

(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로 시작하는 요소를 찾으려면 내가 jQuery를하거나, 브라우저, 관련 요소를 찾기 위해를 통해 검색 할 필요 요소의 수를 줄이기 위해 요소 형을 사용하고

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

참고 : 특정 문자열을 토륨. 이것은 필요하지 않지만 작업량을 조금 줄입니다.

이러한 기능이 반드시 요소의 배열을 반환, 당신은 숫자 자체가 관련된 경우 (내가 있으리라 믿고있어 특정 요소를 대상으로 인덱스 (each(function(index){ /*...*/}))를 사용하여 다음 each()와 그 배열을 반복하고해야합니다 감안할 때 #overlaylink-1은 아마도/act-on #overlaybox-1을 표시해야합니다.)

참고 :

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