.clone(). AppendTo - ersetzen Elementstile nicht funktioniert?

Question

Ich habe einzelne drei Pfeile. auf Klick; Ich möchte das div unter ihnen (letsChat) Stile ändern und ich möchte relevante Informationen in diesem div klonen und anhängen. Ich möchte auch, dass es wieder in seinen ursprünglichen Zustand zurückkehrt, wenn erneut darauf geklickt wird oder wenn die Ausrichtung in Hochformat geändert wird.

document.querySelector('#compositionArrow').onclick = function(){ 
 
    var letsChat = document.querySelector('.lets-chat'); 
 
    var letsChatButton = document.querySelector('.lets-chat a'); 
 
    var compositionArrow = document.querySelector('#compositionArrow') 
 
    var compositionText = document.querySelector('.composition-text'); 
 

 
    if (letsChatButton.style.display='flex' && window.matchMedia("(orientation: landscape)").matches) { 
 
     
 
     compositionArrow.style.transform='rotate(180deg)'; 
 

 
     //letsChat.appendChild(compositionText).cloneNode(true); 
 
     //compositionText.clone().appendTo.letsChat; return false; 
 
     document.querySelector('.composition-text').clone().appendTo(document.querySelector('.lets-chat')); 
 
     letsChat.style.background='#00BCD4'; 
 
     letsChatButton.style.display='none'; 
 
    } 
 
    
 
    else if (letsChatButton.style.display='none' || window.matchMedia("(orientation: portrait)").matches){ 
 
     
 
     compositionArrow.style.transform='rotate(180deg)'; 
 

 
     letsChat.style.background='#ff8f00'; 
 
     letsChatButton.style.display='flex'; 
 
    } 
 
}

Beispiel finden Sie unten: (Sie mit Fenster spielen müssen möglicherweise

artpenleystudios.com

Answer 1

Hier ist etwas, das Teil von dem, was zeigt, fragte man es nicht tut. Orientierungsänderung berücksichtigen, aber es behandelt den Klick-Teil.Wenn ich weiß, gibt es keine einfache Möglichkeit, Orientierungsänderung zu erkennen, aber here's an article that talks about a few options. Eine andere Idee wäre zu Verwenden Sie jQuery Mobile, da es orientationchange Ereignisse auslöst.

Also nach viel Hin und Her und nach genauerem Hinsehen auf Ihre Seite, das ist es, was ich geschafft habe zusammen zu cobble.

jQuery('#compositionArrow').click(function() { 

    var $letsChat = jQuery('.lets-chat'); 
    var letsChat = $letsChat[0]; 
    var letsChatButton = $letsChat.find('a')[0]; 

    // Remove old composition text if it exists. 
    $letsChat.find('.composition-text').remove(); 

    if (letsChatButton.style.display !== 'none' && window.matchMedia("(orientation: landscape)").matches) { 

    this.style.transform = 'rotate(180deg)'; 

    $letsChat.append(jQuery('.composition-text').clone()); 
    letsChat.style.background = '#00BCD4'; 
    letsChatButton.style.display = 'none'; 
    } 

    else if (letsChatButton.style.display === 'none' || window.matchMedia("(orientation: portrait)").matches) { 

    this.style.transform = ''; 

    letsChat.style.background = '#ff8f00'; 
    letsChatButton.style.display = 'flex'; 
    } 

}); 

Es funktioniert für mich in FireFox auf einer heruntergeladenen Version Ihrer Website.

Prost!