翻转卡片时如何删除正面的复选框

Question

我正在尝试制作翻盖卡片。

当我点击卡片正面的发送按钮时，我可以看到卡片的背面。

但前面的复选框仍然可见。

当我将这些复选框转到卡片背面时，如何删除这些复选框？

或者有没有更简单更好的翻牌方式？

const form = document.querySelector('form');
const cardContent = document.querySelector('.card__content');
const card1 = document.querySelector('#card__back__one');
const cardBack = document.querySelectorAll('.card__back');
const btnBack = document.querySelectorAll('.btn__back');


function checkNumber(e) {
    e.preventDefault();
    card1.classList.add('display');

    // Flip card and empty input.
    flipCard();
    form.reset();
}

function flipCard() {
    cardContent.classList.toggle('is-flipped');
}

form.addEventListener('submit', checkNumber);

btnBack.forEach(function (btn) {
    btn.addEventListener("click", flipCardBack);
});

$(function () {
    $('.button-checkbox').each(function () {

        // Settings
        var $widget = $(this),
            $button = $widget.find('button'),
            $checkbox = $widget.find('input:checkbox'),
            color = $button.data('color'),
            settings = {
                on: {
                    icon: 'glyphicon glyphicon-check'
                },
                off: {
                    icon: 'glyphicon glyphicon-unchecked'
                }
            };

        // Event Handlers
        $button.on('click', function () {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.triggerHandler('change');
            updateDisplay();
        });
        $checkbox.on('change', function () {
            updateDisplay();
        });

        // Actions
        function updateDisplay() {
            var isChecked = $checkbox.is(':checked');

            // Set the button's state
            $button.data('state', (isChecked) ? "on" : "off");

            // Set the button's icon
            $button.find('.state-icon')
                .removeClass()
                .addClass('state-icon ' + settings[$button.data('state')].icon);

            // Update the button's color
            if (isChecked) {
                $button
                    .removeClass('btn-default')
                    .addClass('btn-' + color + ' active');
            } else {
                $button
                    .removeClass('btn-' + color + ' active')
                    .addClass('btn-default');
            }
        }

        // Initialization
        function init() {

            updateDisplay();

            // Inject the icon if applicable
            if ($button.find('.state-icon').length == 0) {
                $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
            }
        }
        init();
    });
});

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.card__container {
    width: 100%;
}

.card__content {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 2s;
}

.card__content.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    background-color: #f5f5f5;
    text-align: center;
    backface-visibility: hidden;
}

.card__face>p {
    color: #484848;
    padding-bottom: 1em;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
}

.card__back {
    transform: rotateY(180deg);
    display: none;
}

.card__back.display {
    display: block;
}

#card__back__one>p {
    color: #484848;
    padding-bottom: 1em;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
}


/* CSS for the card__front  */

.card__front {
    padding: 20px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<head>
   <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="card__container">
      <div class="card__content">
         <!--       Front of the card -->
         <div class="card__face card__front">
            <td>
               <p><img width="200" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></p>
               <p>
                  <span style="font-size:16px">.</span><br>
                  <strong style="font-size:16px">Give me feedback</strong>
               </p>
               <form>
                  <div class="container">
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">1</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">2</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">3</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">4</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">5</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">6</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">7</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">8</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">9</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">10</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">11</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <hr />
                     <span class="button" style='float: right;'>
                     <button type="submit" class="btn btn-success" data-color="success">Send</button>
                     <input type="submit" class="hidden"  />
                     </span>
                  </div>
               </form>
            </td>
         </div>
         <!--       Back of the card -->
         <div id="card__back__one" class="card__face card__back">
            <td>
               <p><img width="200" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></p>
               <p>
                  <span style="font-size:16px">Thanks for feedback.</span><br>
               </p>
            </td>
         </div>
      </div>
   </div>
</body>

感谢您的帮助。

Answer 1

检查以下代码段。

我已经添加了以下代码，并且似乎按预期工作。

.card__content.is-flipped .button-checkbox {
  visibility: hidden;
}

const form = document.querySelector('form');
const cardContent = document.querySelector('.card__content');
const card1 = document.querySelector('#card__back__one');
const cardBack = document.querySelectorAll('.card__back');
const btnBack = document.querySelectorAll('.btn__back');


function checkNumber(e) {
    e.preventDefault();
    card1.classList.add('display');

    // Flip card and empty input.
    flipCard();
    form.reset();
}

function flipCard() {
    cardContent.classList.toggle('is-flipped');
}

form.addEventListener('submit', checkNumber);

btnBack.forEach(function (btn) {
    btn.addEventListener("click", flipCardBack);
});

$(function () {
    $('.button-checkbox').each(function () {

        // Settings
        var $widget = $(this),
            $button = $widget.find('button'),
            $checkbox = $widget.find('input:checkbox'),
            color = $button.data('color'),
            settings = {
                on: {
                    icon: 'glyphicon glyphicon-check'
                },
                off: {
                    icon: 'glyphicon glyphicon-unchecked'
                }
            };

        // Event Handlers
        $button.on('click', function () {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.triggerHandler('change');
            updateDisplay();
        });
        $checkbox.on('change', function () {
            updateDisplay();
        });

        // Actions
        function updateDisplay() {
            var isChecked = $checkbox.is(':checked');

            // Set the button's state
            $button.data('state', (isChecked) ? "on" : "off");

            // Set the button's icon
            $button.find('.state-icon')
                .removeClass()
                .addClass('state-icon ' + settings[$button.data('state')].icon);

            // Update the button's color
            if (isChecked) {
                $button
                    .removeClass('btn-default')
                    .addClass('btn-' + color + ' active');
            } else {
                $button
                    .removeClass('btn-' + color + ' active')
                    .addClass('btn-default');
            }
        }

        // Initialization
        function init() {

            updateDisplay();

            // Inject the icon if applicable
            if ($button.find('.state-icon').length == 0) {
                $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
            }
        }
        init();
    });
});

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.card__container {
    width: 100%;
}

.card__content {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 2s;
}

.card__content.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.card__content.is-flipped .button-checkbox {
  visibility: hidden;
}

.card__face {
    position: absolute;
    width: 100%;
    background-color: #f5f5f5;
    text-align: center;
    backface-visibility: hidden;
}

.card__face>p {
    color: #484848;
    padding-bottom: 1em;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
}

.card__back {
    transform: rotateY(180deg);
    display: none;
}

.card__back.display {
    display: block;
}

#card__back__one>p {
    color: #484848;
    padding-bottom: 1em;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
}


/* CSS for the card__front  */

.card__front {
    padding: 20px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<head>
   <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="card__container">
      <div class="card__content">
         <!--       Front of the card -->
         <div class="card__face card__front">
            <td>
               <p><img width="200" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></p>
               <p>
                  <span style="font-size:16px">.</span><br>
                  <strong style="font-size:16px">Give me feedback</strong>
               </p>
               <form>
                  <div class="container">
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">1</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">2</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">3</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">4</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">5</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">6</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">7</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">8</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">9</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">10</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">11</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <hr />
                     <span class="button" style='float: right;'>
                     <button type="submit" class="btn btn-success" data-color="success">Send</button>
                     <input type="submit" class="hidden"  />
                     </span>
                  </div>
               </form>
            </td>
         </div>
         <!--       Back of the card -->
         <div id="card__back__one" class="card__face card__back">
            <td>
               <p><img width="200" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></p>
               <p>
                  <span style="font-size:16px">Thanks for feedback.</span><br>
               </p>
            </td>
         </div>
      </div>
   </div>
</body>

Answer 2

添加

backface-visibility: hidden;

到

.card__content.is-flipped

导致：

.card__content.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
    backface-visibility: hidden;
}

也带你去那里。

const form = document.querySelector('form');
const cardContent = document.querySelector('.card__content');
const card1 = document.querySelector('#card__back__one');
const cardBack = document.querySelectorAll('.card__back');
const btnBack = document.querySelectorAll('.btn__back');


function checkNumber(e) {
    e.preventDefault();
    card1.classList.add('display');

    // Flip card and empty input.
    flipCard();
    form.reset();
}

function flipCard() {
    cardContent.classList.toggle('is-flipped');
}

form.addEventListener('submit', checkNumber);

btnBack.forEach(function (btn) {
    btn.addEventListener("click", flipCardBack);
});

$(function () {
    $('.button-checkbox').each(function () {

        // Settings
        var $widget = $(this),
            $button = $widget.find('button'),
            $checkbox = $widget.find('input:checkbox'),
            color = $button.data('color'),
            settings = {
                on: {
                    icon: 'glyphicon glyphicon-check'
                },
                off: {
                    icon: 'glyphicon glyphicon-unchecked'
                }
            };

        // Event Handlers
        $button.on('click', function () {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.triggerHandler('change');
            updateDisplay();
        });
        $checkbox.on('change', function () {
            updateDisplay();
        });

        // Actions
        function updateDisplay() {
            var isChecked = $checkbox.is(':checked');

            // Set the button's state
            $button.data('state', (isChecked) ? "on" : "off");

            // Set the button's icon
            $button.find('.state-icon')
                .removeClass()
                .addClass('state-icon ' + settings[$button.data('state')].icon);

            // Update the button's color
            if (isChecked) {
                $button
                    .removeClass('btn-default')
                    .addClass('btn-' + color + ' active');
            } else {
                $button
                    .removeClass('btn-' + color + ' active')
                    .addClass('btn-default');
            }
        }

        // Initialization
        function init() {

            updateDisplay();

            // Inject the icon if applicable
            if ($button.find('.state-icon').length == 0) {
                $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
            }
        }
        init();
    });
});

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.card__container {
    width: 100%;
}

.card__content {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 2s;
}

.card__content.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
  backface-visibility: hidden;
}

.card__face {
    position: absolute;
    width: 100%;
    background-color: #f5f5f5;
    text-align: center;
    backface-visibility: hidden;
}

.card__face>p {
    color: #484848;
    padding-bottom: 1em;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
}

.card__back {
    transform: rotateY(180deg);
    display: none;
}

.card__back.display {
    display: block;
}

#card__back__one>p {
    color: #484848;
    padding-bottom: 1em;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
}


/* CSS for the card__front  */

.card__front {
    padding: 20px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<head>
   <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="card__container">
      <div class="card__content">
         <!--       Front of the card -->
         <div class="card__face card__front">
            <td>
               <p><img width="200" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></p>
               <p>
                  <span style="font-size:16px">.</span><br>
                  <strong style="font-size:16px">Give me feedback</strong>
               </p>
               <form>
                  <div class="container">
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">1</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">2</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">3</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">4</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">5</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">6</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">7</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">8</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">9</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">10</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <span class="button-checkbox">
                     <button type="button" class="btn" data-color="success">11</button>
                     <input type="checkbox" class="hidden"  />
                     </span>
                     <hr />
                     <span class="button" style='float: right;'>
                     <button type="submit" class="btn btn-success" data-color="success">Send</button>
                     <input type="submit" class="hidden"  />
                     </span>
                  </div>
               </form>
            </td>
         </div>
         <!--       Back of the card -->
         <div id="card__back__one" class="card__face card__back">
            <td>
               <p><img width="200" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></p>
               <p>
                  <span style="font-size:16px">Thanks for feedback.</span><br>
               </p>
            </td>
         </div>
      </div>
   </div>
</body>

翻转卡片时如何删除正面的复选框

How can I remove the checkboxes on the front face when I flip the card

html

javascript

css

flip