#42 循环调节列表


  • 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();
    

  • 0

    const initAdjustableList = () => {
      document.getElementById('adjustable-list').addEventListener('click', function (e) {
        if (['up', 'down'].indexOf(e.target.className) < 0) return
        let nodeList = this.querySelectorAll('li')
        let current = e.target.parentNode
        let index = Array.prototype.indexOf.call(nodeList, current);
        let isUp = e.target.className === 'up'
        if (isUp && index < 1) {
          this.append(current)
        } else if (!isUp && index >= nodeList.length - 1) {
          this.insertBefore(current, nodeList[0])
        } else {
          isUp ? this.insertBefore(current, nodeList[index - 1]) : this.insertBefore(current, nodeList[index + 2])
        }
      }, false)
    }
    

  • 0

    const initAdjustableList = () => {
      const parent = document.querySelector('#adjustable-list');
      const childrenLi = parent.children;
      parent.addEventListener('click', (e) => {
        if (e.target.tagName.toLowerCase() === 'button') {
          const li = e.target.parentNode;
          const index = [...childrenLi].indexOf(li);
          let newIndex = 0;
          if (e.target.className === 'up') {
            newIndex = index - 1 < 0 ? childrenLi.length : index - 1
          } else {
            newIndex = index + 2 > childrenLi.length ? 0 : index + 2
          }
          parent.insertBefore(li, childrenLi[newIndex])
        }
      })
    };
    

  • 0

    const initAdjustableList = () => {
      document.body.querySelector('#adjustable-list').addEventListener('click', (e) => {
        const curr = e.target.parentElement
        const parent = curr.parentElement
        let prev
        if (e.target.className == 'up') {
          prev = curr.previousElementSibling
        } else if (e.target.className == 'down') {
          prev = curr.nextElementSibling ? curr.nextElementSibling.nextElementSibling : parent.children[0]
        }          
        prev ? parent.insertBefore(curr, prev) : parent.appendChild(curr)           
      })
    }
    

  • 0

    const initAdjustableList = () =>{
      $('.up').click(function(){
        let li = $(this).parent();
        li.prev().html()!=undefined?li.prev().before(li):li.parent().append(li);
      })
      $('.down').click(function(){
        let li = $(this).parent();
        li.next().html()!=undefined?li.next().after(li):li.parent().prepend(li);
      })
    }
    

登录后回复
 

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