Selectable() Jquery 移动替代答案

【问题标题】：Selectable() Jquery mobile alternativeSelectable() Jquery 移动替代
【发布时间】：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

标签： javascript jquery api mobile jquery-ui-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>

【讨论】：