Question

我正在接受 PHP laravel 网络开发培训

但是我在前端有两个小任务，我没有时间学习前端来完成它们，请帮助解决它们。

我有 4 个按钮和 1 个 p：

       <button> trans('navbar.Students')</buttom>
       <button> trans('navbar.Schools')</buttom>
       <button> trans('navbar.teachers')</buttom>
       <button> trans('navbar.teachers')</buttom>

                       <p> </p>

我想要以下内容：当用户按下其中一个按钮时：

   1- Change the button color.
   2- Putting the value of the button that was pressed in <p>.

例如某人点击 button1：按钮颜色将变为蓝色，p 值为
Students

Answer 1

var buttons = document.querySelectorAll(".my-button");
var para = document.querySelector("#my-para");

buttons.forEach((button, i) => {
  button.addEventListener("click", () => {
    select(i);
    para.innerHTML = button.innerHTML;
  });
});

function select(num) {
  buttons.forEach((button, i) => {
    if (i === num) return button.classList.add("active");
    button.classList.remove("active");
  });
}

.active {
  background: blue;
}

<button class="my-button">AAA</button>
<button class="my-button">BBB</button>
<button class="my-button">CCC</button>
<button class="my-button">DDD</button>
<p id="my-para"></p>

这是一个旧答案，但回到它，我想展示一种方法，即使在重新加载页面后，也可以仅使用 JavaScript 来保持选择答案。解决方案在于使用localStorage。（它在 Stack Snippets 中不起作用，所以使用 this Jsitor link）

Answer 2

您可以使用 javascript，这里是示例：

document.querySelectorAll('button').forEach(function(item){
   item.addEventListener('click', function(e){
      e.target.style.background = 'red';
      e.target.setAttribute('value', 'yourValue');
   });
});

Answer 3

遍历按钮 nodeList，添加一个事件监听器。

设置一个函数来运行一个for循环来比较每个循环的索引。确保当前迭代类列表不是未定义的（如果未定义，则会抛出错误）。默认情况下，删除背景颜色更改后，检查索引是否匹配，如果是，请使用具有背景颜色和颜色规则集的类添加BG颜色并将P标记为TextContent到当前按钮的TextContent。

const button = document.querySelectorAll('.btn')
const display = document.querySelector('#display')

const setSelection = (btnEl, index, parEl) => {
  for (let key in btnEl) {
    if (btnEl[key].classList !== undefined) {
      btnEl[key].classList.remove('blue')
      if (index == key) {
        btnEl[key].classList.add('blue')
        parEl.textContent = btnEl[key].textContent
      }
    }
  }
}

button.forEach((btn, i) => {
  btn.addEventListener('click', (e) => {
     setSelection(button,i,display)
  })
})

.blue {
  background-color: blue;
  color: white;
}

<button class="btn">Value 1</button>
<button class="btn">Value 2</button>
<button class="btn">Value 3</button>
<button class="btn">Value 4</button>

<p id="display"></p>

Answer 4

这是我的解决方案：

function go(theButton){
    theButton.style.background = 'blue';
  theButton.style.color = 'white';
    document.getElementById("gg").textContent=theButton.textContent;
}

<button onclick="go(this)"> Students</button>
<button onclick="go(this)"> Schools</button>
<button onclick="go(this)"> teachers</button>
<button onclick="go(this)"> teachers</button>

<p id="gg"> </p>

单击时更改按钮值和颜色

4 个答案: