jQuery Girl
  1. jQuery Girl
  3. Remplacer le contenu de Div par le contenu d’une autre div jQuery
Intereting Posts
Comment poster des articles commandés sans délai d’attente au contrôleur Afficher / masquer tout JQuery (page FAQ) EmberJS comment gérer la transition Recherche d’une position de cellule (ligne, colonne) dans des tableaux nesteds Highchart: distance exacte entre les ticks Animation SVG et firefox Comment styliser la validation jQuery (http://jqueryvalidation.org/)? `delay` n’est pas une fonction (jQuery 1.3) Afficher / masquer les options de sélection optgroup dans Internet Explorer Comment obtenir le résultat sur la même page, pourquoi la saisie est nécessaire? Comment mettre à jour la valeur des données dans jqgrid : remote => true / data-remote sur un formulaire chargé via ajax Comment désélectionner l’enregistrement de la grid dans kendoui Comment déclencher la validation sans utiliser de bouton d’envoi Utilisation de jQuery pour passer au focus sur un onglet avec une erreur de validation

Remplacer le contenu de Div par le contenu d’une autre div jQuery

Je voudrais remplacer le contenu d’une div par le contenu d’une autre div (qui est masquée à l’aide de css) en cliquant sur une image. Cependant, en utilisant quelques méthodes suggérées ici, je n’arrive pas à le faire fonctionner.

mon code est ci-dessous:

html 

Recent Callaborations
 
  
Some image caption that is hidden now and that will replace what is in the rec div below
 
 
 this is the content that is to be replaced

js 

 jQuery(document).ready(function() { jQuery(".rec1").click(function(event) { event.preventDefault() jQuery('#rec-box').html($(this).next('#rec1')[0].outerHTML); }); });

css 

 #collaborations { width: 100%; margin:0 0 10px 0; padding:0; } #collaborations img { display:inline-block; } .rec { background: #EDEDED; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 10px; } #rec1, #rec2, #rec3, #rec4 { display:none; }

Vous devez simplement définir le html() du bon div . Essaye ça: 

 jQuery(document).ready(function() { jQuery(".rec1").click(function(event) { event.preventDefault() jQuery('#rec-box').html(jQuery(this).next().html()); }); }); 
 jQuery(document).ready(function() { jQuery(".rec1").click(function(event) { event.preventDefault() jQuery('#rec-box').html(jQuery("#rec1").html()); }); });

Je préférerais la solution suivante 🙂 J’espère que ça aide

HTML 

 
Recent Callaborations
 
  
Some image caption that is hidden now and that will replace what is in the rec div below
 
 
 this is the content that is to be replaced

JavaScript 

 $(document).ready(function() { switchContent = function(ev) { var el = $($(this).attr('href')); if(el.length == 1) { $('#rec-box').html(el.html()); } ev.preventDefault(); }; $('.switchContent').on('click',switchContent); });

Votre code d’origine semble échouer car vous capturez l’intégralité de l’élément masqué, et pas seulement son contenu, à l’aide de la propriété outerHTML (plutôt que innerHTML ). Cela signifie que le contenu nouvellement copié a toujours

, et est toujours masqué en raison de la règle css.

La méthode html de jQuery peut à la fois obtenir et définir innerHTML , c’est donc la méthode correcte ici. 

 $(document).ready(function () { $(".rec1").click(function (event) { event.preventDefault(); $('#rec-box').html($('#rec1').html()); //replaces with contents of #rec1 }); });

Vous devez obtenir $("#rec").contents() .clone() et .clone() it

Vous devez .append() le dans $('#rect-box') après l’avoir eu .empty() le 

 jQuery(function($) { $(".rec1").on('click',function(event) { event.preventDefault(); $('#rec-box').empty().append(($('#rec1').contents().clone()); }); });