Question

我有以下图片库http://jsfiddle.net/GErnD/ 我可以翻转卡片，里面没有图片。但是当我将其他元素（如图片）放入其中时，如何让卡片翻转呢？

我正在使用jquery sly和css3d。

HTML

<div class="wrap">
      <div class="scrollbar">
        <div class="handle" style="-webkit-transform: translateZ(0px) translateX(270px); width: 301px;">
          <div class="mousearea">
          </div>
        </div>
      </div>
      <div class="frame effects" id="effects" style="overflow: hidden;">
        <ul style="-webkit-transform: translateZ(0px) translateX(-694px); width: 3500px;" class="">
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    me
                    <img alt="Thumb glo me" src="http://dummyimage.com/300x300/000/fff">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    view
                    <img alt="Thumb octopus wall art" src="http://dummyimage.com/300x300/000/fff">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li class="active">
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    another
                    <img alt="Thumb karaoke 2013 002" src="http://dummyimage.com/300x300/000/fff">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li class="">
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    error
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    h
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    hey
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    this
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
        </ul>
      </div>
      <div class="controls center">
        <button class="btn prev"><i class="icon-chevron-left"> prev</i></button>
        <button class="btn next">next <i class="icon-chevron-right"></i></button>
      </div>
    </div>

CSS

/* effects */
.effects {
  height: 200px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  overflow-y: show; }
  .effects ul {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; }
    .effects ul li {
      position: relative;
      margin: 0 -20px;
      -webkit-transform: rotateY(60deg) scale(0.9);
      -moz-transform: rotateY(60deg) scale(0.9);
      -ms-transform: rotateY(60deg) scale(0.9);
      -o-transform: rotateY(60deg) scale(0.9);
      transform: rotateY(60deg) scale(0.9);
      -webkit-transition: -webkit-transform 600ms ease-out;
      transition: transform 600ms ease-out; }
    .effects ul li.active {
      z-index: 10;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
    .effects ul li.active ~ li {
      -webkit-transform: rotateY(-60deg) scale(0.9);
      -moz-transform: rotateY(-60deg) scale(0.9);
      -ms-transform: rotateY(-60deg) scale(0.9);
      -o-transform: rotateY(-60deg) scale(0.9);
      transform: rotateY(-60deg) scale(0.9); }

.frame {
  height: 550px;
  overflow: hidden; }
  .frame ul {
    list-style: none;
    margin: 0px 0px;
    padding: 0;
    height: 100%; }
    .frame ul li {
      float: left;
      width: 500px;
      height: 100%;
      margin: 0px 0px;
      padding: 0px;
      background: #fff;
      color: #000;
      text-align: center;
      cursor: pointer;
      border: solid #3184e9 2px;
      border-radius: 20px; }
      .frame ul li img {
        padding: 5px 0px; }
    .frame ul li.active.flip {
      color: #000;
      background: #fff;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }

/* scrollbar */
.scrollbar {
  margin: 5px 0px;
  padding: 0px 0px;
  height: 5px;
  background: #ccc;
  line-height: 0; }
  .scrollbar .handle {
    width: 100px;
    height: 100%;
    margin: 5px 0px;
    background: #292a33;
    cursor: pointer; }
  .scrollbar .mousearea {
    position: absolute;
    top: -9px;
    left: 0;
    width: 100%;
    height: 20px; }

的Javascript

var $frame = $('#effects');
  var $wrap  = $frame.parent();

  // Call Sly on frame
  $frame.sly({
    horizontal: 1,
    itemNav: 'forceCentered',
    smart: 1,
    activateMiddle: 1,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 3,
    scrollBar: $wrap.find('.scrollbar'),
    scrollBy: 1,
    speed: 300,
    elasticBounds: 1,
    easing: 'swing',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,
    keyboardNavBy: 'items',

    // Buttons
    prev: $wrap.find('.prev'),
    next: $wrap.find('.next')
  });

  $('.active').click(function() {
    document.querySelector('.active').classList.toggle("flip");
  });
  $('.active').children().click(function() {
    document.querySelector('.active').classList.toggle("flip");
  });

Answer 1

发生这种情况是因为您只将onClick处理程序分配给具有类.active的元素，该元素在那个MOMENT中可见，js解析执行该操作。当你的元素失去类.active，或者另一个元素获得类.active时，onclick处理程序不会改变，因为javascript不会查找这些更改。

您应该使用$('.active').live('click', function...或使用$('.frame.effects').on('click', '.active', function...

与$.live(eventType, callback)或$.click(callback)相对的

$.on(eventType, callback)会识别对类名的更改，$.on(eventType, selector, callback)

也是如此

EDIT 好吧看来，jQuery删除了live函数。但请查看更新后的jsFiddle，了解如何使用$.on(eventType, selector, callback)。您也可以阅读jQuery API doc

jquery点击事件不与儿童一起工作

1 个答案: