jQuery blockUI - 'message' 属性值不会出现在具有相同 class 的已阻止 div 中

Question

jQuery blockUI

我有多个 div 具有相同的 class (js-car)，尝试在单击 'Block' 按钮时实现 blockUI 我想用相同的 class (js-car) 阻止所有 divs，它有点工作，但指标即将出现仅在最后 div。我怎样才能让它在所有 div 中显示指标？

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="/_ui/responsive/common/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/_ui/responsive/common/js/jquery.blockUI-2.66.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#blockButton').click(function() {
                $('div.js-car').block({ message: $("<img src='/_ui/responsive/common/images/spinner.gif'/>") });
            });

            $('#unblockButton').click(function() {
                $('div.js-car').unblock();
            });

        });
    </script>
</head>
<body>
    <button id="blockButton">Block</button>
    <button id="unblockButton">Unblock</button>

    <div class="js-car">
        <a href="#" class="test">Test link - click me!</a>
        <p>
        <select><option>Option 1</option><option>Option 2</option></select>
        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet
        <select><option>Option 1</option><option>Option 2</option></select>

        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        <a href="#" class="test">Test link - click me!</a>
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet<br>
        <textarea rows="2" cols="20">test textarea</textarea>
    </div>

    <div class="js-car">
        <a href="#" class="test">Test link - click me!</a>
        <p>
        <select><option>Option 1</option><option>Option 2</option></select>
        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet
        <select><option>Option 1</option><option>Option 2</option></select>

        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        <a href="#" class="test">Test link - click me!</a>
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet<br>
        <textarea rows="2" cols="20">test textarea</textarea>
    </div>

</body>
</html>

Answer 1

看起来这个问题没有解决方案， https://github.com/malsup/blockui/issues/20

我更新了我的代码，添加了如下所示的 indicator/spinner，

        $(".blockUI.blockMsg.blockElement > img").remove();
        $(".blockUI.blockMsg.blockElement").append("<img 
             src='/_ui/responsive/common/images/spinner.gif'>");

jQuery blockUI - 'message' 属性值不会出现在具有相同 class 的已阻止 div 中

jQuery blockUI - 'message' property value not coming up in blocked divs with same class

jquery

jquery-blockui

jQuery blockUI - 'message' 属性 值不会出现在具有相同 class 的已阻止 div 中

jQuery blockUI - 'message' property value not coming up in blocked divs with same class

jquery

jquery-blockui

jQuery blockUI - 'message' 属性值不会出现在具有相同 class 的已阻止 div 中