爲什麼ClassName打破這個代碼？

Question

我創建2組簡單的元素：

var mydragg = function() { 
 
    return { 
 
    move: function(div, xpos) { 
 
     div.style.left = xpos + 'px'; 
 
    }, 
 
    startMoving: function(div, container, evt) { 
 
     evt = evt || window.event; 
 
     var posX = evt.clientX, 
 
     divLeft = div.style.left, 
 
     eWi = parseInt(div.style.width = "200px"), 
 
     cWi = parseInt(document.getElementById(container).style.width = "200px"); 
 

 
     document.getElementById(container).style.cursor = 'move'; 
 

 
     divLeft = divLeft.replace('px', ''); 
 
     var diffX = posX - divLeft; 
 
     document.onmousemove = function(evt) { 
 
     evt = evt || window.event; 
 
     var posX = evt.clientX, 
 
      aX = posX - diffX; 
 
     if (aX < 0) aX = 0; 
 
     if (aX > cWi) aX = cWi; 
 

 
     mydragg.move(div, aX); 
 
     } 
 
    }, 
 
    stopMoving: function(container) { 
 
     var a = document.createElement('script'); 
 
     document.getElementById(container).style.cursor = 'default'; 
 
     document.onmousemove = function() {} 
 
    }, 
 
    } 
 
}();

<div class="wrapper"> 
 
    <div id="container"> 
 
    <div class="green dragme" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper wrapper-red"> 
 
    <div id="container"> 
 
    <div class="red dragme" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'> 
 
    </div> 
 
    </div> 
 
</div>

一切正常（綠色和紅色塊是通過鼠標拖動 - https://codepen.io/rinatoptimus/pen/GvMNPW），但不應該有多個ID與同名稱。所以，我已經改變了IDS（「容器」）上課，之後碼不起作用：https://codepen.io/rinatoptimus/pen/OjxWJO?editors=1010

Answer 1

你打電話document.getElementById(container)，因爲你自己說這是一個類不是ID。您應該撥打document.getElementsByClassName。

但是，您只是使用該名稱查詢所有類名的文檔，因此您將獲得多個，並且不知道要選擇哪個。解決方法有很多，但一個是，它可能只是更容易選擇與div.parentElement父元素：

https://codepen.io/ferahl/pen/oeGBgL

Answer 2

你可以只發送元素的javascript，並在JavaScript你剛剛接觸直接的元素你發送，不需要再次查詢元素。

的Html

<div class="wrapper"> 
<div class="container">  
    <div class="green dragme" onmousedown='mydragg.startMoving(this,event);' 
    onmouseup='mydragg.stopMoving(this);'> 
    </div> 
</div> 

<div class="wrapper wrapper-red"> 
    <div class="container">  
     <div class="red dragme" onmousedown='mydragg.startMoving(this,event);' 
     onmouseup='mydragg.stopMoving(this);'> 
     </div> 
    </div> 
</div> 

的JavaScript

var mydragg = function(){ 
return { 
    move : function(div,xpos){ 
    div.style.left = xpos + 'px'; 
    }, 
    startMoving : function(div,evt){ 
    evt = evt || window.event; 
    var posX = evt.clientX, 
     divLeft = div.style.left, 
     eWi = parseInt(div.style.width = "200px"), 
     cWi = parseInt(div.style.width = "200px"); 

    div.style.cursor='move'; 

    divLeft = divLeft.replace('px',''); 
    var diffX = posX - divLeft; 
    document.onmousemove = function(evt){ 
     evt = evt || window.event; 
     var posX = evt.clientX, 
      aX = posX - diffX; 
     if (aX < 0) aX = 0; 
     if (aX > cWi) aX = cWi; 

     mydragg.move(div,aX); 
    } 
    }, 
    stopMoving : function(container){ 
    var a = document.createElement('script'); 
    container.style.cursor='default'; 
    document.onmousemove = function(){} 
    }, 
} }();