Question

假设我在HTML页面中有<div>个对象，其ID为#videoModal +任何数字，从 0 到∞。

回声输出示例：

<div class='modal fade' id='videoModal" . $row['id'] . "' tabindex='-9999' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
    ...
</div>

其中$row['id']是我上面所说的任何数字。现在我有一个jQuery函数，可以在视频显示的Bootstrap 3模态窗口中停止youtube。

$('#videModal').on('hidden.bs.modal', function() {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

但是，上述脚本仅在ID为“videoModal”的div标签附近没有任何数字（读取$row['id']）时才有效（例如＃videoModal0，＃videoModal1，＃videoModal9999）。我在哪种方式匹配该函数将与每个videoModal+n ID一起使用的运行时模式。（n * - 数字）

这就是我尝试的（我尝试了除“。”之外的其他模式，但是这会带来相同的结果 - 没有任何反应，视频在关闭模态窗口后仍然可以播放）：

<script>
    var $videoModalIDn = new RegExp('\\.');
    var $videoModalID = "#videoModal" + $videoModalIDn;

    $($videModalID).on('hidden.bs.modal', function() {
        var src = $(this).find('iframe').attr('src');
        $(this).find('iframe').attr('src', '');
        $(this).find('iframe').attr('src', src);
    });
</script>

感谢。

编辑（这是有效的固定代码）：

$('div[id^=videoModal]').on('hidden.bs.modal', function() {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

Answer 1

使用属性选择器而不是正则表达式：

选择器将是[id ^ = videoModal]

属性选择器引用：

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

jQuery函数中的正则表达式将匹配ID +任何数字

1 个答案: