Блог

Главная - Вопросы по программированию - Выбираемая () мобильная альтернатива Jquery

Выбираемая () мобильная альтернатива Jquery

#javascript #jquery #api #mobile #jquery-ui-selectable

#javascript #jquery #API #Мобильный #jquery-выбираемый пользовательский интерфейс

Вопрос:

Я искал решение для своего 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, не сработало… И любые версии.. Я перепробовал все, что было написано в интернете;(

Комментарии:

1. github.com/Mobius1/Selectable

Ответ №1:

Я попробовал ваш код и … кажется, он работает! Фрагмент находится здесь, ниже, просто нажмите Выполнить фрагмент кода и упорядочите буквы в «ПИРОГИ».

Я предлагаю вам прочитать об 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>