文章/答案/技术大牛

发布

社区首页 >问答首页 >Selectable() Jquery移动替代方案

问Selectable() Jquery移动替代方案
EN

Stack Overflow用户

提问于 2020-09-23 05:59:57

回答 1查看 61关注 0票数 0

我正在为我的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链接，不起作用……和任何版本的..我尝试了互联网上写的所有东西；

mobile

jquery-ui-selectable

javascript

jquery

api

回答 1

Stack Overflow用户

发布于 2020-11-21 21:19:40

我试过你的代码，...it似乎还能用！代码片段在下面，只需按运行代码片段，并订购字母“派”。

我建议您阅读有关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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64018230

复制

相似问题

问Selectable() Jquery移动替代方案
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Selectable() Jquery移动替代方案EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Selectable() Jquery移动替代方案
EN