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

Question

I currently have a div element as below in my html:

<div class="tile-group six">

I am looking to use this javascript somehow to load html into the div above

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

It is the second part of the function (the first part does some effect that is currently working so added the line below with the .load bit).

This works for a div id but not for a class. Is this possible?

I NOW HAVE IT WORKING BUT IT HAPPENS TOOO QUICKLY SO I HAVE BEEN ADVISED THE FOLLOWING....

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

But that does nothing and wont let the function run.???

THE CSS for the flipOutX function

@-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

Seems like you are missing class selector. Change

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

to

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

UPDATE:

If you want to perform the load action when the toggleClass is completed, you can use promises:

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

Answer 2

Notice the . . It signifies a class is used as selector . So if you want to select an element (or many) with the class(es) tile-group six :

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

If you can, it would probably be better practice to use an id as selector :

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

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

The reason being that you can have many classes named "title-group six" (doesn't have to be unique), and that would load your content into all of them.

Answer 3

Take a look at the Jquery class selector https://api.jquery.com/class-selector/

So you can use:

the Jquery selector: $( ".myClass .myChildClass" )

the JavaScript selector like this: document.getElementsByClassName('myclass').getElementsByClassName('myChildclass') to find all the 'myChildclass' who have 'myclass' as parent class in your DOM

Answer 4

你能试一下吗

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