.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 - 替换元素样式不起作用？

回答

相关问题