Selectable() Jquery 移动替代
Posted
技术标签:
【中文标题】Selectable() Jquery 移动替代【英文标题】：Selectable() Jquery mobile alternative 【发布时间】：2021-01-09 01:56:21 【问题描述】：我一直在为我的 API 寻找解决方案，但找不到。所有示例或建议均无效。有人可以帮帮我吗？或者给我什么建议？我还在学习 JQuery，所以任何帮助都会非常受欢迎..
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New api</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section>
<div id="alert"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul id="wordblock">
</ul>
<div id="result">Result</div>
</section>
<script src="./api.js"></script>
</main>
</body>
</html>
JQuery 代码：
function screenResolutionAlert(x)
if (x.matches)
$("#alert").html("This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse").show();
else
$("#alert").hide();
var x = window.matchMedia("(max-width: 1200px)")
screenResolutionAlert(x)
x.addListener(screenResolutionAlert)
//API swap words code
$(function ()
$("#wordblock").sortable();
$("#wordblock").disableSelection();
const array = ["pierogi", "gołąbki", "pies", "sześcian"];
const word = array[Math.floor(Math.random() * array.length)];
let d_word = word.split('');
shuffle(d_word);
const lis = [];
for (let i = 0; i < d_word.length; i++)
lis.push('<li class="ui-state-default">' + d_word[i] + '</li>')
$('#wordblock').html(lis.join(''));
$('#wordblock').mouseup(function ()
setTimeout(() =>
let r_word = '';
$('#wordblock>li').each(function (e)
r_word += $(this).text();
);
if (r_word == word)
$("#result").html(`Correct! It was exactly "$r_word"`);
else
$("#result").html(`Wrong! keep trying.. <br> it's not "$r_word"`);
, 0);
);
);
function shuffle(a, b, c, d)
c = a.length;
while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
是的，我使用的是移动 Jquery 链接，但不起作用...以及任何版本的...我尝试了互联网上写的所有内容；(
【问题讨论】：
github.com/Mobius1/Selectable 【参考方案1】：我尝试了您的代码，并且......它似乎工作！片段在下面，只需按 Run code sn-p，然后将字母排序到“PIES”。
我建议您阅读有关 API 的内容，因为目前您根本没有使用任何 API！ ?
function screenResolutionAlert(x)
if (x.matches)
$("#alert")
.html(
"This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse"
)
.show();
else
$("#alert").hide();
var x = window.matchMedia("(max-width: 1200px)");
screenResolutionAlert(x);
x.addListener(screenResolutionAlert);
//API swap words code
$(function ()
$("#wordblock").sortable();
$("#wordblock").disableSelection();
const array = ["pies"];
const word = array[Math.floor(Math.random() * array.length)];
let d_word = word.split("");
shuffle(d_word);
const lis = [];
for (let i = 0; i < d_word.length; i++)
lis.push('<li class="ui-state-default">' + d_word[i] + "</li>");
$("#wordblock").html(lis.join(""));
$("#wordblock").mouseup(function ()
setTimeout(() =>
let r_word = "";
$("#wordblock>li").each(function (e)
r_word += $(this).text();
);
if (r_word == word)
$("#result").html(`Correct! It was exactly "$r_word"`);
else
$("#result").html(`Wrong! keep trying.. <br> it's not "$r_word"`);
, 0);
);
);
function shuffle(a, b, c, d)
c = a.length;
while (c)
(b = (Math.random() * (--c + 1)) | 0),
(d = a[c]),
(a[c] = a[b]),
(a[b] = d);
ul#wordblock
padding-left: 0;
ul#wordblock li
display: inline-block;
font-size: 2em;
padding: 0.2em 0.2em;
cursor: pointer;
background-color: aliceblue;
border-radius: 50%;
margin: 0.5em;
width: 1em;
height: 1em;
text-align: center;
line-height: 0.9em;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New api</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section>
<div id="alert"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul id="wordblock">
</ul>
<div id="result">Result</div>
</section>
<script src="./api.js"></script>
</main>
</body>
</html>【讨论】：
以上是关于Selectable() Jquery 移动替代的主要内容，如果未能解决你的问题，请参考以下文章