我正在构建一个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>可排序状态?

最佳答案

这对我有用。

$( 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
        });


     });


但这与您的代码相同,请使用浏览器的控制台(通常使用F12键)检查网页的其他脚本中是否没有JavaScript错误。

10-08 01:08