Question

我正在构建一个3x3益智游戏。最终我想构建它，以便在双击时可以将各个部分锁定在列表中的位置。不过，现在，我专注于构建一个功能，当作品class

时会改变dblclick状态

这是我的代码：

<body>

<div id="puzzleboard">
    <ul id="pieces">

        <li></li><li ></li><li></li><li ></li><li ></li><li></li><li></li><li></li><li></li>

    </ul>

</div>

<script type="text/javascript">

    window.onload = populate;

    var imgArray = new Array("images/Untitled-0.png","images/Untitled-1.png","images/Untitled-2.png","images/Untitled-3.png","images/Untitled-4.png","images/Untitled-5.png","images/Untitled-6.png","images/Untitled-7.png","images/Untitled-8.png");

    var usedImg = new Array()

    var itemArray = new Array ("item0", "item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8")

    var div = document.getElementById("pieces");

    var list = document.getElementsByTagName('li')

    function populate(){



        for (i=0; i<list.length;i++){

                var randomNum = Math.floor(Math.random()*imgArray.length);//generates a random #

                var img = new Image(); // creates a new image object
                img.src = imgArray[randomNum]; //source of the image is based on the random # and correlating item in imgArray

                do {
                    randomNum = Math.floor(Math.random()*imgArray.length);
                    img.src = imgArray[randomNum]; //generates a new number
                } while (usedImg[img.src]); // but only if the source of the image is in used images


                usedImg[img.src] = true; //copies img.src to used image

                var imgPlace=document.createElement('img'); //instruct it to create an img tag
                imgPlace.src=img.src; //defines source

                var item = list[i]

                list[i].id = itemArray[randomNum];


                list[i].appendChild(imgPlace);

        };

    };


    $(list).dblclick(function(){
        $(this).toggleClass('ui-state-disabled');
        });

     $( function() {
        $( "#pieces" ).sortable({
          items: "li:not(.ui-state-disabled)"

        });

     });

</script>

这适用于脚本，但每个<img>都有一个<li>。该页面将使用<li>加载所有class="ui-sortable-handle"，当作品dblclick成为class="ui-sortable-handle ui-state-disabled"时，图片会变为dblclick，但当我<li>再次出现时，它不会改变回来。那么，当它是一个图像时，如何切换df <- data.frame(a=sample(1:2, 60, replace=TRUE), b=c(1:3)) stripchart(b~a, data=df, method="stack", offset=0.5, pch=20)可排序状态？

Answer 1

这适合我。

$( function() {
        $("#pieces").sortable({
          items: "li:not(.ui-state-disabled)"

        });
        $("#pieces li").dblclick(function(){
            $(this).toggleClass('ui-state-disabled');
            //$(this).children().toggleClass('ui-state-disabled'); //if you want to change property of the image for example opacity
        });     


     });

但与您的代码相同，请检查您的网页的其他脚本中是否存在JavaScript错误，使用浏览器的控制台（通常使用F12键）

当图像为

1 个答案: