如何使用jQuery翻转动态添加的图像

Question

.html

<tbody id="item-determination" class="item-table">
</tbody>

.js

$('<td><img src="image/' + item['Group 1'].toLowerCase() + '.png"/></td>').appendTo(tr);

根据来自服务程序的数据，图像会更新并将其附加到表格上。在悬停在图像上时，我希望它翻转并显示一些文本，就像此处发生：https：//www.ostraining.com/images/coding/jquery-flip/demo/

但是，由于我不使用HTML的类似结构，我该如何从使用的jQuery线中获得相同的影响？

任何类型的帮助将不胜感激。谢谢。

$(function () {
        //var $btnAdd = $('#btn-add-item');
      //var $rbFlipType = $('input[name=flipType]');
      var $tblItems = $('#tbl-items');
      var $tbodyItems = $tblItems.children('tbody');
      $(function () {
        //var flipType = $rbFlipType.filter(':checked').val();
        //var random = Math.random() * 9999999999999999;
        var item = `<tr>
            <td>
            <div class="flippable-container">
                <div class="flippable">
                <img src="image/' + item['Group 1'].toLowerCase() + '.png" title=""/>
                <h1>$('<td></td>').text(item['Group 1']).appendTo(tr)</h1>
              </div>
            </div>
          </td>
        </tr>`;
        $tbodyItems.append(item);
      });
    });
</script>

Answer 1

您可以通过CSS进行翻转动画，但我确实必须重组HTML。

$(function () {
  var $btnAdd = $('#btn-add-item');
  var $rbFlipType = $('input[name=flipType]');
  var $tblItems = $('#tbl-items');
  var $tbodyItems = $tblItems.children('tbody');
  
  $btnAdd.click(function () {
    var flipType = $rbFlipType.filter(':checked').val();
    var random = Math.random() * 9999999999999999;
    /* Template literal
    var item = `<tr>
    	<td>
      	<div class="flippable-container">
        	<div class="flippable ${flipType}">
          	<img src="http://lorempixel.com/400/200/cats?randomQueryString=${random}" title="">
            <h1>${flipType}</h1>
          </div>
        </div>
      </td>
    </tr>`;
    */
    var item = '<tr>' +
      '<td>' +
        '<div class="flippable-container">' +
          '<div class="flippable ' + flipType + '">' +
            '<img src="http://lorempixel.com/400/200/cats?randomQueryString=' + random + '" title="">' +
            '<h1>' + flipType + '</h1>' +
          '</div>' +
        '</div>' +
      '</td>' +
    '</tr>';
    
    $tbodyItems.append(item);
  });
});

* {
  margin: 0;
  padding: 0;
}
html, body {
  font: normal 14px/1.8 Helvetica, Arial, sans-serif;
}
.flippable-container {
  perspective: 1000px;
}
.flippable {
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: 0.6s;
  width: 400px;
}
.flippable img,
.flippable h1 {
  backface-visibility: hidden; /* Don't show the backside of the element when rotated. */
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 400px;
}
.flippable img {
  z-index: 1; /* Keep the img in front. */
}
.flippable h1 {
  background: #eee;
  line-height: 200px;
  text-align: center;
}
.flippable.vertical img {
  transform: rotateX(0);
}
.flippable.vertical h1,
.flippable.vertical:hover {
  transform: rotateX(180deg);
}
.flippable.horizontal img {
  transform: rotateY(0);
}
.flippable.horizontal h1,
.flippable.horizontal:hover {
  transform: rotateY(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <label for="rb-flip-type-horizontal">
    <input id="rb-flip-type-horizontal" type="radio" value="horizontal" name="flipType">
    Horizontal
  </label>
  <label for="rb-flip-type-vertical">
    <input id="rb-flip-type-vertical" type="radio" value="vertical" name="flipType">
    Vertical
  </label>
  <button id="btn-add-item">
    Add
  </button>
  <table id="tbl-items">
    <tbody></tbody>
  </table>
</div>

基于大卫·沃尔什（David Walsh）的翻转。