Question

我有点困惑于此 - 我正在使用带有模态覆盖插件的Wordpress短代码将多个叠加层插入到内容编辑器中。但是，我试图不为每个ID多次重复我的jQuery代码。

正如您在短代码中看到的，我可以在Wordpress的编辑器中设置覆盖的ID，如下所示：

简码

[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>

这是我不想为每个ID重复的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代码，以便它可以解释所有ID，即'overlaylink-x'和overlaybox-x'，其中x是任意数字？

感谢您的帮助

大须

- * - 编辑 - * -

这是最终的jQuery代码 - 我已经更新了HTML和Shortcode以包含这个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 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的{{1}}以及锚标记的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);

Answer 2

要查找具有以给定字符串开头的id的元素：

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

请注意，我正在使用element-type来减少jQuery或浏览器需要搜索的元素数量，以便查找相关元素。这不是必需的，但可以减少一点工作量。

鉴于这些函数必然返回元素数组，您必须使用each()遍历该数组，然后使用索引（each(function(index){ /*...*/})）来定位特定元素（如果数字本身是相关（我假设#overlaylink-1应该显示/行动#overlaybox-1）。

参考文献：

具有唯一ID的多个jQuery模态叠加

2 个答案: