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

示例可以在下面找到:(您可能需要使用窗口

artpenleystudios.com

Answer 1

这是展示你所要求的部分内容的东西。它没有考虑方向更改，但它处理点击部分。据我所知，没有直接的方法来检测方向变化，但是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。

干杯！

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

1 个答案: