#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])
                        }
                    }
                })
            }
        })
    }
    
    

  • 0

    const initAdjustableList = function() {
    let oul = document.getElementById('adjustable-list');
    oul.addEventListener('click',upOrDown);
    function upOrDown(e){
    	let ev = e || window.event;
    	let target = ev.target;
    	target.classList.contains('up') ? upBtn() : '';
    	target.classList.contains('down') ? downBtn() : '';
    	function upBtn(){  let oli = target.parentElement;
    		oul.insertBefore(oli,oli.previousElementSibling);}
    	function downBtn(){     let oli = target.parentElement;
    		let next = oli.nextElementSibling;
    		oli === oul.lastElementChild ? 
    		oul.insertBefore(oli,oul.firstElementChild) : oul.insertBefore(next,oli);}
     }  }

  • 0

    @qq1448896454#42 循环调节列表 中说:

      const initAdjustableList = function() {
     	 let oul = document.getElementById('adjustable-list');
      oul.addEventListener('click',upOrDown);
       function upOrDown(e){
    	let ev = e || window.event;
    	let target = ev.target;
    	target.classList.contains('up') ? upBtn() : '';
    	target.classList.contains('down') ? downBtn() : '';
    	function upBtn(){  let oli = target.parentElement;
    		oul.insertBefore(oli,oli.previousElementSibling);}
    	function downBtn(){     let oli = target.parentElement;
    		let next = oli.nextElementSibling;
    		oli === oul.lastElementChild ? 
    		oul.insertBefore(oli,oul.firstElementChild) : oul.insertBefore(next,oli);}
     }  }

  • 0

    const initAdjustableList = ()=>{
    let upOrDown = (e)=>{   let ev = e || window.event;
    	let target = ev.target;
    	let upBtn = ()=>{	let oli = target.parentElement;
    		oul.insertBefore(oli,oli.previousElementSibling);
    	return false;}
    	let dwBtn = ()=>{	let oli = target.parentElement;
    		let next = oli.nextElementSibling;
    		oli === oul.lastElementChild ? 
    		oul.insertBefore(oli,oul.firstElementChild) : oul.insertBefore(next,oli);
    	return false;}
    	target.classList.contains('up') ? upBtn() : '';
    	target.classList.contains('down') ? dwBtn() : '';
    return false;}
    let oul = document.getElementById('adjustable-list');
    oul.addEventListener('click',upOrDown);
    return false;}

  • 0

    $(() = >{
    
        $('#adjustable-list li').click(function(e) {
            if (e.target instanceof HTMLButtonElement) {
                var classList = e.target.classList;
                if (classList.contains('up')) {
                    var prev = $(this).prev();
                    if (prev.length) {
                        prev.before($(this));
                    } else {
                        $(this).nextAll().last().after($(this));
                    }
                } else if (classList.contains('down')) {
                    var next = $(this).next();
                    if (next.length) {
                        next.after($(this))
                    } else {
                        $(this).prevAll().last().before($(this));
                    }
                }
            }
        })
    })
    

  • 0

    本地运行可以,就是提交答案报答案错误

    const initAdjustableList = () => {
      var adjustableList = document.getElementById('adjustable-list')
    
      adjustableList.onclick = function(e) {
        var liList = this.querySelectorAll('li')
        var target = e.target
        var key = target.className
        var li = target.parentNode
    
        function getIndex(li) {
          return Array.from(liList).indexOf(li)
        }
    
        if (key === 'up') {
          var prevLi = li.previousElementSibling
    
          this.removeChild(li)
    
          if (getIndex(li) === 0) {
            this.appendChild(li)
          } else {
            this.insertBefore(li, prevLi)
          }
        } else {
          var nextLi = li.nextElementSibling
    
          this.removeChild(li)
    
          if (getIndex(li) === liList.length - 1) {
            this.insertBefore(li, liList[0])
          } else {
            if (nextLi === liList.length - 1) {
              this.appendChild(li)
            } else {
              this.insertBefore(li, nextLi.nextElementSibling)
            }
          }
        }
      }
    }
    

  • 0

    const initAdjustableList =function (){
        var lilist=$('#adjustable-list li')
        $('#adjustable-list li button').on('click',function(){
    	var curtag=$(this).parent()
    	var curindex=$(this).parent().index()
    	if(-1!=$(this).attr('class').indexOf('up')){
    		if(curindex===0){
    			$(this).parent().insertAfter($('#adjustable-list li:last-child'))
    		}else{
    			$(this).parent().insertBefore(curtag.prev())
    		}
    	}else{
    		if(curindex===lilist.length-1){
    			$(this).parent().insertBefore($('#adjustable-list li:first-child'))
    		}else{
    			$(this).parent().insertAfter(curtag.next())
    		}
    	}
        })
    }
    initAdjustableList();
    

登录后回复
 

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