附加到HTML元素的JS對象

因此，我已經越來越多地進入oop w js（我在java中經受過培訓），並且我有四個框。我想要做這樣的事情附加到HTML元素的JS對象

<div class="box"><\div> 
    <div class="box"><\div> 
    <div class="box"><\div> 
    <div class="box"><\div> 

    Function Box(){ 
     //PRIVATE VAR 
    var count=0; 
    } 
    Box.prototype.move = function(){ 
     this.css({left:50}); 
    } 

    Box.prototype.click= function(){ 
     this.count++; 
    } 

    //create new instances of box and assign or connect to the four HTML elements 
    For (var i = 0; i < $('.box').length; i++){ 
      $('.box')[i] = new Box(); 
    }

基本上我想每箱有被每次被點擊時增加自己的私人點擊次數財產。

這是一個理想的模式或連接這樣的HTML元素是一種不好的做法嗎？我應該將HTML元素傳遞給函數嗎？如果是這樣，我將如何保持一個對象的私人點擊var與特定元素同步。

我OBV知道有簡單jQuery的方法可以做到這一點，但我希望把重點放在接力

來源

2015-07-21 ryan

計數是一個局部變量，而不是一個屬性，你的函數有資本F. – epascarello

所以我在我的 – ryan

iPhone這樣做的，它是自動更正。這應該是幾乎像僞代碼...我不需要語法幫助我需要我想要完成的總體想法......以及爲什麼它目前不工作 – ryan

這裏是一個小提琴解釋什麼ü希望實現的。 https://jsfiddle.net/2e24a3kx/

首先，您需要查找所有框。然後，對於每個框，創建新框，傳遞對DOM對象的引用，並連接處理程序。

var boxes = $.find('.box'); 
    for(var i = 0; i < boxes.length; i++) { 
     var box = new Box(); 
     box.$view = $(boxes[i]); 
     box.connectClick(); 
    }

計數是「私有變量」。它在調用函數Box時創建爲本地作用域變量。 Box函數「記住」所有局部範圍變量。通過用new創建對象，您需要本地創建的函數（this.increateCounter），以便他們可以訪問count變量。通過Box中的getCounter/increaseCounter函數，您可以訪問計數器。

在函數connectClick im傳遞給jQuery變量綁定（this）的函數。因爲這是我們的對象框。而連接處理程序的jquery將此變量更改爲DOM。函數綁定更改函數將這個變量賦值給我們的Box，綁定返回新函數。 https://www.google.pl/search?q=mdn+Bind&oq=mdn+Bind&aqs=chrome..69i57j69i60j69i59j69i61j69i59l2.1082j0j7&sourceid=chrome&es_sm=93&ie=UTF-8

function Box(){ 
     //PRIVATE VAR 
     this.$view; 
     this.increaseCounter = function() { 
      count++; 
     }; 

     this.getCounter = function() { 
      return count; 
     } 
     var count=0; 
    }

jQuery是指出錯誤，不要太簡單。它只是更結構化的方式。當你在OOP中建模時，你必須做更多的努力來維護一些結構。

我認爲最好的方式是使用純JavaScript函數的addEventListener（事件對象），

在那裏你可以直接傳遞爲對象框。盒已經然後實現功能onEventReceived（事件）

http://www.thecssninja.com/javascript/handleevent

來源

2015-07-21 14:22:20

附加到HTML元素的JS對象

回答

相關問題