Question

我目前在html中有一个div元素：

<div class="tile-group six">

我希望以某种方式使用此javascript将html加载到上面的div

<script>          
 $(".tile").click(function(e) {
    $(".tile").toggleClass("flipOutX"); 
   $("tile-group six").load("musability-musictherapy-company-overview.html");
 });    
</script>

这是函数的第二部分（第一部分做了一些当前正在工作的效果，所以在下面添加.load位的行）。

这适用于div个ID但不适用于类。这可能吗？

我现在有工作但是很快发生了很多事情我已经被告知以下......

$(".tile").click(function(e) {
  $(".tile").toggleClass("flipOutX").promise().done(function(){
    $(".tile-group .six").load("musability-musictherapy-company-overview.html");
});

但这没有任何作用，也不会让函数运行。???

flipOutX函数的CSS

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

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

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

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

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

Answer 1

好像你缺少类选择器。变化

$("tile-group six").load("musability-musictherapy-company-overview.html");

到

$(".tile-group .six").load("musability-musictherapy-company-overview.html");

<强>更新

如果您想在load完成后执行toggleClass操作，可以使用承诺：

$(".tile").toggleClass("flipOutX").promise().done(function(){
    $(".tile-group .six").load("musability-musictherapy-company-overview.html");
});

Answer 2

注意.。它表示class is used as selector。因此，如果您想要使用类tile-group six：

选择一个元素（或多个元素）

$(".tile-group .six").load("musability-musictherapy-company-overview.html");

如果可以的话，最好使用id as selector：

<div id="myDiv" class="whatever"></div>

$('#myDiv').load();

原因是您可以拥有许多名为“title-group six”的类（不一定是唯一的），这会将您的内容加载到所有类中。

Answer 3

查看Jquery类选择器https://api.jquery.com/class-selector/

所以你可以使用：

Jquery选择器： $( ".myClass .myChildClass" )

像这样的JavaScript选择器：document.getElementsByClassName('myclass').getElementsByClassName('myChildclass')找到所有'myChildclass'，他们将'myclass'作为DOM中的父类

Answer 4

你能试试吗

$(this).closest("div").load("musability-musictherapy-company-overview.html");

使用javascript和/或Jquery通过类选择器将html加载到DIV中

4 个答案: