在jQuery代码中使用HTML提取部分网址并在其他地方重复使用？

Question

基础：我的主页上有一个简单的灯箱（下面的代码）。 它的工作原理完全符合我的期望：单击触发图像时，它会在页面的其余部分显示为灰色，并添加HTML来为我要显示的基于文本的页面创建iframe。

问题： 我需要创建一个灯箱，根据点击的图片动态选择内容 。 这些URL将彼此对应-例如，如果用户单击“ /media/X.png”，则将为他/她提供一个包含页面“ /X.html”的iframe的灯箱。

我该怎么做？ 我的第一个选项位于下方（在原始的静态灯箱代码之后）。 它从我在网上阅读的各种内容以及其他关于StackOverflow的类似问题的答案中整理而来，但是我对jQuery非常陌生/基本上没有Java脚本，而且我怀疑我滥用了变量赋值和“拆分”功能。

非常感谢。

编辑：有人帮助我将变量插入HTML（如下）。 但是，我认为我分配的变量不正确（请参见第二个代码块的开头）。 这是我要对每个变量进行的操作：1. pre_lightbox_trigger：从用户单击的图像中获取字符串“ X.png”。 2. lightbox_trigger：仅抓取“ X”（删除“ .png”）。 3. lightbox_trigger_href：将X变成“ X.html”，并使其成为链接。

码：

原始的静态灯箱：

$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
    e.preventDefault();
    if ($('#lightbox').length > 0) {
        $('#lightbox').show();
    }
    else {
        var lightbox =
        '<div id="lightbox">' +
            '<div id="content">' +
                '<iframe src="why.html" id="lightframe" frameborder="0" seamless>' +
                '</iframe>' +
            '</div>' +
            '<p>Click outside to close</p>' +
        '</div>';
        $('body').append(lightbox);
    }
    $(document).on('click', '#lightbox', function() {
        $('#lightbox').hide();
    });
});
});

我尝试创建动态链接：

$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
    e.preventDefault();
    var pre_lightbox_trigger = location.'.lightbox_trigger'.split('/').pop();
    var lightbox_trigger = pre_lightbox_trigger.split('.').pop(1);
    var lightbox_trigger_href = lightbox_trigger + ".html";
    if ($('#lightbox').length > 0) {
        $('#lightbox').show();
    }
    else {
        var lightbox =
        '<div id="lightbox">' +
            '<div id="content">' +
                '<iframe src=$lightbox_trigger_href id="lightframe" frameborder="0" seamless>' +
                '</iframe>' +
            '</div>' +
            '<p>Click outside to close</p>' +
        '</div>';
        $('body').append(lightbox);
    }
    $(document).on('click', '#lightbox', function() {
        $('#lightbox').hide();
    });
});
});

编辑＃2：目前，我的灯箱“静态”版本仅用于“ trigger_small.png”。 但是，我也希望在单击其他图像时显示一个灯箱（例如，“ vio_mass.png”）。 参见以下示例HTML：

        <div id="trigger">
            <a class="lightbox_trigger" href="media/trigger_small.png">
                <img src="media/trigger_small.png">
            </a>
        </div>
        <div class="cat" id="violence_cat">
            <div class="cat_grid" id="vio_1">
            </div>
            <div class="cat_grid" id="vio_2">
                <img src="media/vio_mass.png">
            </div>
...etc.

Answer 1

代替

var lightbox =
    '<div id="lightbox">' +
        '<div id="content">' +
            '<iframe src=$lightbox_trigger_href id="lightframe" frameborder="0" seamless>' +
            '</iframe>' +
        '</div>' +
        '<p>Click outside to close</p>' +
    '</div>';

你会做

var lightbox =
    '<div id="lightbox">' +
        '<div id="content">' +
            '<iframe src=' + lightbox_trigger_href + ' id="lightframe" frameborder="0" seamless>' +
            '</iframe>' +
        '</div>' +
        '<p>Click outside to close</p>' +
    '</div>';