Javascript 如何在击倒中切换三维翻转_Javascript_Jquery_Knockout.js

Javascript 如何在击倒中切换三维翻转

javascript jquery knockout.js

Javascript 如何在击倒中切换三维翻转,javascript,jquery,knockout.js,Javascript,Jquery,Knockout.js,这可能太愚蠢了，但我似乎无法正确思考我有这个我想翻（见）。我想用一个按钮把它翻过来 ViewModel = function () { var self = this; self.flipIt = function() { //alert("At least this is working!"); $(this).find('.card').addClass('flipped').click(function () {

这可能太愚蠢了，但我似乎无法正确思考

我有这个我想翻（见）。我想用一个按钮把它翻过来

ViewModel = function () {
    var self = this;

    self.flipIt = function() {
        //alert("At least this is working!");
        $(this).find('.card').addClass('flipped').click(function () {
            $(this).removeClass('flipped');
        });
        return false;
    }
}

ko.applyBindings(new ViewModel());

我也尝试过。切换类（“翻转”）。

然而，我没有得到我想要的反应。

你遇到了两个问题。首先，

这是flipIt（）函数中的错误值。在knockout中，通过click绑定调用的函数被传递两个参数，即实际click事件的数据和事件对象。您需要将这些信息传递给您的函数，如：
self.flipIt = function(data, event) {

然后，您可以使用event.target
属性来访问触发click事件的实际DOM元素，而不是this

第二个问题是使用jQuery选择器查找实际的.card
元素。find
方法搜索元素的后代，但是.card
元素实际上是
的兄弟的子元素，因此您需要类似以下内容：
$(event.target).siblings().find(".card").toggleClass('flipped');

我还删除了第二个click处理程序，因为我们可以使用jQuery的toggleClass
方法来删除这个类
我在这里更新了你的小提琴：
希望有帮助
 您遇到了两个问题。首先，这是flipIt（）函数中的错误值。在knockout中，通过click绑定调用的函数被传递两个参数，即实际click事件的数据和事件对象。您需要将这些信息传递给您的函数，如：
self.flipIt = function(data, event) {

然后，您可以使用event.target
属性来访问触发click事件的实际DOM元素，而不是this

第二个问题是使用jQuery选择器查找实际的.card
元素。find
方法搜索元素的后代，但是.card
元素实际上是
的兄弟的子元素，因此您需要类似以下内容：
$(event.target).siblings().find(".card").toggleClass('flipped');

我还删除了第二个click处理程序，因为我们可以使用jQuery的toggleClass
方法来删除这个类
我在这里更新了你的小提琴：
希望有帮助
 通过将实际编排添加到flipIt
单击功能，您使事情变得比需要的更复杂。我的建议是通过使用一个中间的可观察对象来跟踪翻转的状态来保持事物的离散性和不相交性
有关更多信息，请参阅。以下是我建议的要点：

将flipped（）
observable添加到视图模型：self.flipped=ko.observable（false）

将css
绑定添加到卡div:
在flipIt
函数中，只需将可观测值设置为其布尔倒数：
var flipped=self.flipped（）

self.fliped（！fliped）


这将在单击时切换类。诚然，我无法让其他东西正常工作（可能是因为我没有使用webkit浏览器），但这可能会让您开始工作。
通过向flipIt
单击功能添加实际编排，您让事情变得比需要的更复杂。我的建议是通过使用一个中间的可观察对象来跟踪翻转的状态来保持事物的离散性和不相交性
有关更多信息，请参阅。以下是我建议的要点：

将flipped（）
observable添加到视图模型：self.flipped=ko.observable（false）

将css
绑定添加到卡div:
在flipIt
函数中，只需将可观测值设置为其布尔倒数：
var flipped=self.flipped（）

self.fliped（！fliped）


这将在单击时切换类。诚然，我无法让其他东西正常工作（可能是因为我没有使用webkit浏览器），但这可能会让你开始工作。
以下是我的做法：
示例模板：
<button data-bind="click: toggleFlip">Flip</button>
<div data-bind="css: { 'flipOutY' : isFlipped, 'flipInY': !isFlipped() }" class="animated">
    <h1>Some lovely title</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

和翻转CSS：
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

我会这样做：
示例模板：
<button data-bind="click: toggleFlip">Flip</button>
<div data-bind="css: { 'flipOutY' : isFlipped, 'flipInY': !isFlipped() }" class="animated">
    <h1>Some lovely title</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

和翻转CSS：
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@至于G，使用不带jQuery的解决方案。这是一种干净的方法。使用ko的全部目的是不要让jQ mish mash到处都是。美丽的。你的解决方案让我再次相信人类！：）太多了@至于G，使用不带jQuery的解决方案。这是一种干净的方法。使用ko的全部目的是不要让jQ mish mash到处都是。美丽的。你的解决方案让我再次相信人类！：）太多了！非常感谢阿德里安。我在我的代码（不是小提琴）中尝试了这一点，但它不起作用。然而，您的兄弟姐妹问题使我走上了正轨，在我的代码中，我必须与父母交换兄弟姐妹（）。现在它工作了。：）非常感谢阿德里安。我在我的代码（不是小提琴）中尝试了这一点，但它不起作用。然而，您的兄弟姐妹问题使我走上了正轨，在我的代码中，我必须与父母交换兄弟姐妹（）。现在它工作了。：）可爱！我喜欢那里的反弹效果。Bu在html中，你把卡片的“背面”放在哪里？太好了！我喜欢那里的反弹效果。Bu在html中，你把卡片的“背面”放在哪里？