Question

您可能会看到，我对JS还是很陌生，一直在尝试了解这些功能，而我要实现的是，当我的设备尺寸小于736时，该按钮应该进行动画处理。所以我正确地使用了按钮，但是在使用特定的屏幕尺寸时却很费劲。有人可以帮忙吗-预先感谢。

HTML

.btn {
    width: 200px;
    height: 100px;
    text-align: center;
    padding: 40px;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: .6px;
    border-radius: 5px;
    border: none;
    }

css

$(window).resize(function(){
    if ($(window).width() <= 736){  
        // do something


let myBtn = document.querySelector(".btn");

let btnStatus = false;

myBtn.style.background = "#FF7F00";


function bgChange() {
    if (btnStatus == false) 
        {
            myBtn.style.background = "#FF0000"; 
            btnStatus = true;
        }

    else if (btnStatus == true) 
        {
            myBtn.style.background = "#FF7F00";
            btnStatus = false;
        } 
 }

myBtn.onclick = bgChange; 

    }   
});

JavaScript

Session      slot_num         ID    prob
s1           1                A     0.2
s1           2                B     0.9
s1           2                B     0.4
s1           2                B     0.4
s1           3                C     0.7
s1           4                D     0.8
s1           4                D     0.3
s1           5                E     0.6
s1           6                F     0.5
s1           7                G     0.7
s2           1                A1    0.6
s2           2                B1    0.5
s2           3                C1    1.1
s2           3                C1    0.6
s2           4                D1    0.7
s2           5                E1    0.6
s2           6                F1    0.7
s2           7                G1    1.2
s2           7                G1    0.7

Answer 1

以下是您尝试执行的操作的实现：

class更改按钮样式，而不是style，
香草JavaScript而非jQuery。

使用类是一个好主意，因为它可以将样式保留在CSS中，而不包含在JavaScript代码中。

尽可能使用香草JavaScript。

这是两个新类：

.btn-small-screen {
  background: #FF7F00;
}

.btn-clicked {
  background: #FF0000;
}

.btn-small-screen类在窗口较小时应用，.btn-clicked在单击按钮时切换。

这是JavaScript代码：

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup mode on resize
window.addEventListener('resize', setButtonMode);

// setup mode at load
window.addEventListener('load', setButtonMode);

参考：

一个工作示例：

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup small mode on resize
window.addEventListener('resize', setButtonMode);

// setup small mode at load
window.addEventListener('load', setButtonMode);

    .btn {
      width: 200px;
      height: 100px;
      text-align: center;
      padding: 40px;
      text-decoration: none;
      font-size: 20px;
      letter-spacing: .6px;
      border-radius: 5px;
      border: none;
    }

    .btn-small-screen {
      background: #FF7F00;
    }

    .btn-clicked {
      background: #FF0000;
    }

<button class="btn">CLICK ME</button>

注意：我遗漏了一项优化措施，因此代码易于遵循。

请注意，即使setButtonMode（）可能已设置为所需的模式，但它每次都会更改DOM。这效率低下。

要提高效率并仅在必要时更改DOM，可以引入状态变量（称为smallMode），并在适当时将其设置为true。像这样：

let smallMode = false;

function setButtonMode () {
  if (isSmallWindow()) {
    if (!smallMode) {
      myBtn.classList.add('btn-small-screen');
      myBtn.addEventListener('click', toggleButtonOnClick);
      smallMode = true;
    }
  } else if (smallMode)  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
    smallMode = false;
  }
}

您好如何正确编码此功能

1 个答案: