根据该值在数组中的位置更改 div 的类[关闭]

Posted 2023-05-09

【中文标题】根据该值在数组中的位置更改 div 的类[关闭]

【英文标题】：Change the class of div based on that value's position in array [closed]

【发布时间】：2021-10-09 22:27:33

【问题描述】：

如果我有一个这样拆分的数字数组：

var list = ['one', 'two', 'three', 'four, 'five', 'six', 'seven'];

我有一个 "four" 类的 div 和一对按钮：

<button id="buttonOne"></button>
<div class="four"></div>
<button id="buttonTwo"></button>

我怎样才能使 buttonOne 将类减少到“三”而 buttonTwo 将其增加到“五”？我知道这可能是孩子们的东西，但任何解释都会非常感谢。

【问题讨论】：

这能回答你的问题吗？ javascript: Words to numbers

请参阅How to Ask。你需要努力并展示你的代码。

【参考方案1】：

获取元素的className在数组中的索引，加/减1，然后得到结果索引处的项：

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

const div = document.querySelector('div');
buttonOne.addEventListener('click', function()
  var newClass = list[list.indexOf(div.className)-1]
  div.className = newClass;
  console.log(newClass);
)
buttonTwo.addEventListener('click', function()
  var newClass = list[list.indexOf(div.className)+1]
  div.className = newClass;
  console.log(newClass);
)

<button id="buttonOne">reduce</button>
<div class="four"></div>
<button id="buttonTwo">increase</button>

如果您希望类名循环（例如，如果div 具有seven 类并且单击“增加”按钮会导致类名变为one），只需检查索引是否相等为0 或数组长度减1：

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

const div = document.querySelector('div');
buttonOne.addEventListener('click', function() 
  var index = list.indexOf(div.className);
  var newClass = list[index == 0 ? list.length-1 : index - 1]
  div.className = newClass;
  console.log(newClass);
)
buttonTwo.addEventListener('click', function() 
  var index = list.indexOf(div.className);
  var newClass = list[index == list.length - 1 ? 0  : index + 1]
  div.className = newClass;
  console.log(newClass);
)

<button id="buttonOne">reduce</button>
<div class="four"></div>
<button id="buttonTwo">increase</button>

【讨论】：

最好使用this.nextElementSibling 和this.previousElementSibling。在真正的应用程序中不会有一个 div 元素。

【参考方案2】：

这里还处理了一些 UX 案例，例如在没有操作时禁用按钮。

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
var listlength = list.length-1;
var ele = document.getElementsByClassName("four")[0];
var btnOne = document.getElementById("buttonOne");
var btnTwo = document.getElementById("buttonTwo");
btnOne.addEventListener("click", function()
  var eleIndex = list.indexOf(ele.getAttribute("class"));
  var classname = list[--eleIndex];
      ele.setAttribute("class", classname);
      ele.innerhtml =classname;
      if(eleIndex == 0)this.disabled=true;return false;
      btnTwo.disabled = false;
);

btnTwo.addEventListener("click", function()
  var eleIndex = list.indexOf(ele.getAttribute("class"));
  var classname = list[++eleIndex];
      ele.setAttribute("class", classname);
      ele.innerHTML = classname;
      if(eleIndex ==listlength)this.disabled=true;return false;
      btnOne.disabled = false;
);

<button id="buttonOne" style="float:left;margin-right:10px;">Prev</button>
<div class="four" style="float:left;">four</div>
<button id="buttonTwo" style="float:left;margin-left:10px;">Next</button>

【参考方案3】：

我会这样做

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

//  create variables for the DOM nodes you care about
const div = document.querySelector('div.four');
const buttonOne = document.getElementById('buttonOne');
const buttonTwo = document.getElementById('buttonTwo');

//  a function that returns the current class and its position in the array
const currentClass = () => 
    const className = div.className;
    const index = list.indexOf(className);
    return className, index;
;

const setClass = (index) => 
    div.className = list[index];
;

buttonOne.addEventListener('click', ev => 
    setClass( currentClass()['index'] -1 );
);

buttonTwo.addEventListener('click', ev => 
    setClass( currentClass()['index'] +1 );
);

button::before 
  content: attr(id);


div::before 
  content: attr(class);

<button id="buttonOne"></button>
<div class="four"></div>
<button id="buttonTwo"></button>