.clone().appendTo -替换元素样式不起作用？

Question

我有三支独立的箭。单击后，我希望它们下面的div (letsChat)更改样式，我想克隆并附加该div中的相关信息。我也希望它恢复到它的原始状态，当它再次被点击或如果方向被更改为纵向。

​

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

​

示例可以在下面找到：(您可能需要使用window

artpenleystudios.com

Answer 1

这里有一些东西演示了你所问的部分内容。它没有考虑到方向的改变，但它处理单击部分。据我所知，没有直接的方法来检测方向变化，但here's an article that talks about a few options。另一个想法是在触发orientationchange事件时使用jQuery Mobile。

因此，在反复和更仔细地查看您的站点之后，这是我设法拼凑起来的。

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。

干杯!