#42 循环调节列表


  • 0
    administrators

    页面上有这么一个列表:

    <ul id='adjustable-list'>
      <li>
        <span>1</span>
        <button class='up'>UP</button>
        <button class='down'>DOWN</button>
      </li>
      <li>
        <span>2</span>
        <button class='up'>UP</button>
        <button class='down'>DOWN</button>
      </li>
      <li>
        <span>3</span>
        <button class='up'>UP</button>
        <button class='down'>DOWN</button>
      </li>
      ...
    </ul>
    

    点击 UP 按钮会使得该 li 元素在列表中上升一个位置,点击 DOWN 按钮会使得该 li 元素下降一个位置。点击最后的元素的 DOWN 按钮会使得元素回到第一个位置,点击第一个元素的 UP 按钮会使其回到最后的位置。

    页面上已经存在该列表,你只需要完成 initAdjustableList() 函数,给元素添加事件。


  • 0

    没有通过率的意思是?


  • 0
    administrators

    @Sunjourney 没人做错或者没人做对。


  • 0

    @胡子大哈 那我 30, 42 都通过了啊


  • 0
    administrators

    @Sunjourney 说明没人做错这两道题 🤦‍♂️


  • 0

    难道是我的错觉,我写的脚本都可以但是为什么提交的就是显示答案错误呢

    const initAdjustableList = function(){
        let elBtnUpArr = document.querySelectorAll('.up');
        let elBtnDownArr = document.querySelectorAll('.down');
        let upFunc = function UpFunction(){
          //首先获取当前触发元素的位置
          let parentElement = this.parentElement;
          let index = 0;
          while(parentElement = parentElement.previousElementSibling){
              index++
          }
          //根据坐标判断插入位置
          let ulDiv = document.getElementById('adjustable-list');
          if(index == 0){
            ulDiv.insertBefore(this.parentElement,null)
          }else{
            ulDiv.insertBefore(this.parentElement,ulDiv.children[--index]) 
          }
        } 
        let downFunc = function DownFunc(){
          //首先获取当前触发元素的位置
          let parentElement = this.parentElement;
          let index = 0;
          while(parentElement = parentElement.previousElementSibling){
              index++
          }
          //根据坐标判断插入位置
          let ulDiv = document.getElementById('adjustable-list');
          if(index == 2){
            ulDiv.insertBefore(this.parentElement,ulDiv.children[0])
          }else if(index==1){
            ulDiv.insertBefore(this.parentElement,null)
          }else{
            ulDiv.insertBefore(this.parentElement,ulDiv.children[index+2]) 
          }
        }
        elBtnUpArr.forEach((vaule)=>{
          vaule.addEventListener('click',upFunc,false)
        })
        elBtnDownArr.forEach((vaule)=>{
          vaule.addEventListener('click',downFunc,false)
        })
    }
    

  • 0

    const initAdjustableList = () => {
        var ul = document.getElementById('adjustable-list'),
          btns = ul.getElementsByTagName('button'),
          lis = ul.getElementsByTagName('li'),
          len = lis.length;
    
        [...btns].forEach(d => {
            d.onclick = e => {
                let text = e.target.innerText;
                
                [...lis].forEach((d, i) => {
                    if (d.isEqualNode(e.target.parentNode)) {
                        if (text == 'UP') {
                            ul.insertBefore(d, lis[i-1])
                        } else {
                            ul.insertBefore(d, lis[i+2 > len ? 0 : i + 2])
                        }
                    }
                })
            }
        })
    }
    
    

登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待