我正在构建一个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错误。