Эффект переворачивания текста с его заменой на другой

Question

Вот есть у меня простая таблица с номерами карт, необходимо по клику по ссылке подменить номера в ячейках на буквы a, b, с, d и так далее. Использую jQuery.Не подскажете как поступить лучше?

  <table class="table" id="table_card">

            <tr>
                <td data_card="1">1</td>
                <td data_card="2">2</td>
                <td data_card="3">3</td>
                <td data_card="4">4</td>
                <td data_card="5">5</td>
                <td data_card="6">6</td>
                <td data_card="7">7</td>
                <td data_card="8">8</td>
                <td data_card="9">9</td>
            </tr>
</table>

<a href="#" id="open_card">Открыть карты</a>

Answer 1

Не ясно, конечно, откуда и какой текст должен вставляться в ячейки. Почему буквы, сколько их должно быть? Но для примера код на jquery будет такой. Если уточните задание, поправим. P.S. почему ссылка, а не кнопка?

let arr_en = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
function change_td(){
  let i = 0;
  $('td').each(function() {  
    $(this).html(arr_en[i]);
    i++;
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <table class="table" id="table_card">

            <tr>
                <td data_card="1">1</td>
                <td data_card="2">2</td>
                <td data_card="3">3</td>
                <td data_card="4">4</td>
                <td data_card="5">5</td>
                <td data_card="6">6</td>
                <td data_card="7">7</td>
                <td data_card="8">8</td>
                <td data_card="9">9</td>
            </tr>
</table>

<a onclick='change_td()' href="#" id="open_card">Открыть карты</a>

Answer 2

Ну, вот как-то так

let arr = ['a', 'b', 'c', 'd'];
let flipped = false;

function flip(){
  flipped = !flipped;
  $('input').attr('value', (flipped) ? 'Крутим назад' : 'Крутим вперёд');
  let i = 0;
  $('.parent').each(function() {  
    if (flipped) {
      $(this).addClass('isFlipped').find('.second').text(arr[i]);
    } else {
      $(this).removeClass('isFlipped');
    }
    i++;
  })
}

.parent{
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center left;
  transition: transform 1s;
  width: 40px;
  height: 40px;
  display: inline-block;
}
.first, .second{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.first{
  left: 0px;
  background: hsla(1, 100%, 50%, 0.5);
}

.second{
  right: 0px;
  background: hsla(200, 100%, 50%, 0.5);
  transform: rotateY(180deg);
}

.isFlipped {
  transform: translateX(100%) rotateY(-180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="first">
    1
  </div>
  <div class="second">
  </div>
</div>

<div class="parent">
  <div class="first">
    2
  </div>
  <div class="second">
  </div>
</div>

<div class="parent">
  <div class="first">
    3
  </div>
  <div class="second">
  </div>
</div>

<div class="parent">
  <div class="first">
    4
  </div>
  <div class="second">
  </div>
</div>
<div>
  <input onclick='flip()' type="button" value="Крутим вперёд">
</div>

БЛОГ НА HUSL

Эффект переворачивания текста с его заменой на другой

Ответы (2 шт):