.clone（）。appendTo - 替換元素樣式不起作用？

我有單獨的三個箭頭。點擊;我想讓他們下面的div（letsChat）改變樣式，我想克隆和追加相關的信息在該div。我還希望當它再次單擊或方向改爲肖像時，它會恢復到原始狀態。.clone（）。appendTo - 替換元素樣式不起作用？

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'; 
 
    } 
 
}

例子可以發現如下：（你可以有窗口中播放

artpenleystudios.com

來源

2016-04-29 Art Penley

這裏的東西演示的你問哪一部分沒有。考慮到方向的變化，但它處理了點擊部分。據我所知，沒有直接的方法來檢測方向變化，但是here's an article that talks about a few options。另一個想法是使用jQuery Mobile，因爲它觸發orientationchange事件。

因此，經過很多來回和更緊密地查看您的網站後，這是我設法拼湊在一起。

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'; 
    } 

});

它適用於我在FireFox的下載版本的網站。

乾杯！

來源

2016-04-29 14:10:37 CaffeineFueled

謝謝！這正是我所需要的，除了我的調試出現「Uncaught TypeError：$不是一個函數」，不起作用？我嘗試重新鏈接jQuery，然後它什麼也沒做？！很奇怪 –

@ArtPenley - 有趣。你鏈接的網站似乎包括jQuery。也許別的東西重寫** $ **。我更新了我的代碼片段（上面）以彌補這一點。如果這仍然不起作用，我會將其轉換回普通的JavaScript。讓我知道！ – CaffeineFueled

感謝您的幫助，我真的很感激它，它仍然無法正常工作？它甚至沒有給出任何錯誤？什麼都沒有發生？ –

.clone（）。appendTo - 替換元素樣式不起作用？

回答

相關問題