Изменение номера квадрата на текст "Выбранный" при нажатии и возврат к номеру при повторном нажатии - PullRequest
Новая
       22

Изменение номера квадрата на текст "Выбранный" при нажатии и возврат к номеру при повторном нажатии

0 голосов
/ 23 сентября 2018

У меня есть сетка / перекрещивание, которое содержит числа.Когда я нажимаю на квадрат, число в квадрате должно измениться на «Выбранный».Когда я снова нажимаю на другой квадрат, текст должен превратиться в номер, которым он был изначально.Как я мог вернуть его обратно на номер, которым он был изначально?

Я должен использовать jQuery.Вот мой код: 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title></title>
    <script>
        $(document).ready(function () {
            $("td").click(function () {
                $("td").text("Chosen");
            });
        });
    </script>

    <style>
        table, th, td {
            border: 1px solid black;
            background-color: deeppink;
            font-size: 15px;
        }

     
    </style>
</head>
<body>
    <table style="font-size:20px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    <script src="js/main.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 23 сентября 2018

Вместо того, чтобы заменять его содержимое, просто примените к нему класс, который заставит его отобразить нужный текст.Таким образом, вам не нужно беспокоиться о сохранении значения где-то, когда вы хотите вернуть его. 

$(function() {
  $("td").click(function() {
    // remove .chosen class from all tds
    $('td').removeClass("chosen")
    // add it to clicked one
    $(this).addClass("chosen");
  });
});

Самый простой способ не отображать содержимое элемента и заменить его некоторым текстом: 

element {
  visibility: hidden;
}
element:before {
  visibility: visible;
  contents: 'The replacement content'
}

Но проблема в том, что :before и :after плохо играют с элементами таблицы, поэтому нам нужен небольшой скрипт, который захватывает содержимое каждого td и упаковывает их в <span>, когдастраница загружается, поэтому мы можем применить вышеописанный метод к элементу <span>: 

$("td").each(function(){
  $(this).html($('<span />', {
    html: $(this).html()
  }))
})

Посмотрим, работает ли он: 

$(function() {
  $("td").click(function() {
    $('td').removeClass("chosen")
    $(this).addClass("chosen");
  }).each(function() {
    $(this).html($('<span />', {
      html: $(this).html()
    }))
  })
});
table,th,td {
  border: 1px solid black;
  background-color: deeppink;
  font-size: 15px;
}

td {
  width: 100px;
  padding: 1rem;
  text-align: center;
}

.chosen span {
  visibility: hidden;
}

.chosen span:before {
  visibility: visible;
  content: 'Chosen'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="font-size:20px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
...