Переместить только 1 ячейку в таблице с клавиатурой-стрелкой после загрузки ajax - PullRequest
Новая
       31

Переместить только 1 ячейку в таблице с клавиатурой-стрелкой после загрузки ajax

1 голос
/ 16 марта 2019

Добрый вечер всем вам,

У меня есть такая проблема: Когда я загружаю страницу (селектор таблиц с клавишами со стрелками на клавиатуре) через ajax, активная ячейка перемещается на 2 ячейки.Я хочу, чтобы он двигался только на 1 клетку.Если я перезагружаю страницу (также снова с помощью ajax, активная ячейка перемещается на 3 ячейки и т. Д.). Но когда я нажимаю кнопку, она перемещает только одну ячейку (что я также хочу сделать с помощью клавиши со стрелкой).

Я создал небольшой пример, который порождает ту же проблему: он написан на php и может уместиться на одной странице. Вы все можете попробовать файл php на своих сайтах или протестировать его здесь.: http://leslip.be/test/test/test.php

То, что делает php-код, заключается в основном в создании 2 файлов, которые направляются друг другу с использованием ajax. Это php-код: 

<?php
if (isset($_GET["url"])) $url = $_GET["url"];
    else $url = "home";
?>
<html>
    <head>
        <style>
            .selected { background-color: red; }
        </style>
        <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type="text/javascript">

$(document).ready(function () {
  $(".to_table").click(function() {
    $.ajax({
      cache: false,
      url: "<?php print $_SERVER['PHP_SELF']; ?>",
      data: "url=table",
      success: function(response) {
        $("body").html(response);
	  	}
    });
  });
  $(".to_home").click(function() {
    $.ajax({
        cache: false,
        url: "<?php print $_SERVER['PHP_SELF']; ?>",
        success: function(response) {
          $("body").html(response);
        }
    });
  });
  $(".move").click(function() {
    $('.selected').removeClass('selected').next('td').addClass('selected');
  });
    $(document).keydown(function(key) {
        if (key.which == 39) {
            $('.selected').removeClass('selected').next().addClass('selected');
        }
    });
});
            
        </script>
    </head>
    <body>
<?php
    if ($url == "home") print "
            <div class=\"site\">
                <div class=\"to_table\">go to table</div>
            </div>
    ";
    elseif ($url == "table") print "
        <div class=\"to_home\">go to home</div>
        <div>
            <table style=\"border: 1px solid black;\">
                <tr>
                    <td class=\"selected\" style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                    <td style=\"border: 1px solid black;\">r</td>
                </tr>
            </table>
        </div>
        <div class=\"move\">move selected td</div>
    ";
?>
    </body>
</html>

Ответы [ 3 ]

1 голос
/ 16 марта 2019

Рассмотрим следующий пример кода. 

$(function() {
  function getTable() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      data: "url=table",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function returnHome() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function prev() {
    if ($('.selected').index() == 0) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .prev()
      .addClass('selected');
  }

  function next() {
    var c = $("td.selected").siblings().length;
    if ($('.selected').index() >= c) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .next()
      .addClass('selected');
  }

  function move(e) {
    if ($(e.target).hasClass("next")) {
      next();
    } else {
      prev();
    }
  }

  $(".to_table").on('click', getTable);
  $(".to_home").on('click', returnHome);
  $(".move").on('click', move);
  $(document).keydown(function(key) {
    if (key.which == 39) {
      next();
    }
    if (key.which == 37) {
      prev();
    }
  });
});
.selected {
  background-color: red;
}

.button {
  padding: .2em .4em;
  background: #ccc;
  border-radius: 3px;
  display: inline;
  cursor: pointer;
}
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="to_home button">go to home</div>
<div>
  <table style="border: 1px solid black; margin: 5px;">
    <tbody>
      <tr>
        <td class="selected" style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="move prev button">&lt;</div>
<div class="move next button">&gt;</div>

Возможно, лучше настроить функции, поскольку мы можем затем вызывать их из разных частей пользовательского интерфейса.Похоже, вы хотите, чтобы нажатие кнопки или нажатие клавиши приводило «курсор» в ту или иную сторону.Я добавил prev в ожидании потенциальной потребности.

Функция Move просто помогает нам легче назначать обратный вызов события.Использование .on() позволяет привязывать функции обратного вызова к событиям на элементах, которые в данный момент недоступны.Поскольку они будут созданы из вызовов Ajax, это лучший способ управления им.

Теперь событие click и событие нажатия клавиши вызывают те же функции, которые перемещают курсор.Я также добавил ограничитель, чтобы курсор не перемещался за край.Это использует .index(), чтобы получить индекс текущей ячейки в таблице между 0 и числом братьев и сестер, в этом примере 8.

Надеюсь, это поможет! 

$(function() {
  function getTable() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      data: "url=table",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function returnHome() {
    $.ajax({
      cache: false,
      url: "/test/test/test.php",
      success: function(response) {
        $("body").html(response);
      }
    });
  }

  function prev() {
    if ($('.selected').index() == 0) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .prev()
      .addClass('selected');
  }

  function next() {
    var c = $("td.selected").siblings().length;
    if ($('.selected').index() >= c) {
      return;
    }
    $('.selected')
      .removeClass('selected')
      .next()
      .addClass('selected');
  }

  function up() {
    var row = $(".selected").parent();
    var cInd = $(".selected").index();
    if (row.index() == 0) {
      return;
    }
    $(".selected").removeClass("selected");
    row
      .prev()
      .find("td").eq(cInd)
      .addClass("selected");
  }

  function down() {
    var row = $(".selected").parent();
    var cInd = $(".selected").index();
    if (row.index() >= row.siblings().length) {
      return;
    }
    $(".selected").removeClass("selected");
    row
      .next()
      .find("td").eq(cInd)
      .addClass("selected");
  }

  function wrap(d) {}

  function move(e) {
    var cls = $(e.target).attr("class").split(" ").join("");
    cls = cls.replace("move", "");
    cls = cls.replace("button", "");
    switch (cls) {
      case "next":
        next();
        break;
      case "prev":
        prev();
        break;
      case "up":
        up();
        break;
      case "down":
        down();
        break;
    }
  }

  $(".to_table").on('click', getTable);
  $(".to_home").on('click', returnHome);
  $(".move").on('click', move);
  $(document).keydown(function(key) {
    if (key.which == 39) {
      next();
    }
    if (key.which == 37) {
      prev();
    }
    if (key.which == 38) {
      up();
    }
    if (key.which == 40) {
      down();
    }
  });
});
.selected {
  background-color: red;
}

.button {
  padding: .2em .4em;
  background: #ccc;
  border-radius: 3px;
  display: inline;
  cursor: pointer;
}
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="to_home button">go to home</div>
<div>
  <table style="border: 1px solid black; margin: 5px;">
    <tbody>
      <tr>
        <td class="selected" style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
      <tr>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
      <tr>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
        <td style="border: 1px solid black;">r</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="move up button">/\</div>
<div class="move prev button">&lt;</div>
<div class="move next button">&gt;</div>
<div class="move down button">\/</div>
0 голосов
/ 16 марта 2019

Я нашел решение.Не самый лучший.Когда я открываю сайт, в URL нет GET-переменных.Поэтому я использовал php, чтобы проверить их, а когда их нет, jquery «keydown» записывается в html-soure.Когда есть GET-переменные, код jquery «keydown» отключен. 

  <?php if (!isset($_GET["url"])) print "
$(document).keydown(function(key) {
    if (key.which == 39) {
        $('.selected').removeClass('selected').next().addClass('selected');
    }
}); "; ?>

Так что это подтвердило мои мысли, функция keydown загружается все больше и больше, когда я делаю ajax-запрос.

Итак, все тот же вопрос, как я могу предотвратить это правильным образом?

0 голосов
/ 16 марта 2019

Спасибо за ваш ответ. Отличный материал внутри ... Но когда я использую стрелки, ячейка перемещается правильно, но когда я перезагружаю страницу (иди домой, иду к столу) и использую стрелки на клавиатуре, ячейка снова пропускает одну. Перезагрузите страницу снова, ячейка теперь пропускает 2, и так далее ... Похоже, ajax загружает часть движения с помощью клавиш со стрелками несколько раз ... Но опять же, переходя по ссылкам, прекрасно работает. Как и в моем (не очень красиво закодированном) коде.

Есть ли решение этой проблемы?

пример: http://leslip.be/test/test/test2.php

...