Question

我正在使用找到here的jqPuzzle JS库，我正在尝试在用户完成拼图时更改源图像。

图书馆声明它有一些对象，在这些对象中你可以定义成功时做什么的功能。

这就是我将拼图的HTML集成到工作中的方式：

<img src="myImg1.jpg" alt="First puzzle image" class="jqPuzzle" />

文档然后说下面是在定义成功时要使用的对象：

<script type="text/javascript"> 
    $(document).ready(function() { 
        // define your own settings 
        var mySettings = { 
            success: { 
                callback: function(results) {  
                    alert('Gelöst in ' + results.moves + ' Zügen und ' + 
                        + results.seconds + ' Sekunden.'); 
                } 
        }; 
        }); 
</script>

当用户成功完成第一张图片时，你们能帮助我如何编写这样的功能来改变源图像吗？

Answer 1

尝试将mySettings对象传递给jqPuzzle对象

$(document).ready(function() { 
    // define your own settings 
    var mySettings = { 
        success: { 
            callback: function(results) {  
                alert('Gelöst in ' + results.moves + ' Zügen und ' + 
                    + results.seconds + ' Sekunden.'); 
            } 
    }; 

    // once you've got your settings initialised
    // you must pass them into jqPuzzle
    $('.jqPuzzle').jqPuzzle(mySettings);
})

<强> - 编辑 -

如果您尝试更新成功功能中的图像，是否可以更改图像的SRC属性？

function(results) {  
    alert('Gelöst in ' + results.moves + ' Zügen und ' + 
                    + results.seconds + ' Sekunden.'); 

    // this line can be improved by giving your img element an ID property
    var img = document.getElementsByClassName('jqPuzzle')[0];
    img.src = 'myImg2.jpg';
}

在成功jqPuzzle上更改图像

1 个答案: