在成功jqPuzzle上更改图像

Change image on success jqPuzzle

本文关键字：图像 成功 jqPuzzle      更新时间：2023-09-26

我正在使用此处找到的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>

你们能否帮助我编写这样的函数来在用户成功完成第一个图像时更改源图像？

尝试将

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';
}
相关文章：