從原型功能

這個代碼顯示了兩隻貓和次點擊每隻貓數裏面的函數，我怎麼能增加每隻貓的.clicks酒店需要從Cat.prototype.clickInc內遞增this.clicks（）方法？從原型功能

$(document).ready(function() { 
    var cats = []; 

    var Cat = function(id, image_path) { 

    this.id = id; 
    this.image_path = image_path; 
    this.clicks = 0; 

}; 


Cat.prototype.clickInc = function() { 

    $('#'+this.id).click(function(){ 

    this.clicks++; 

     return this.clicks; 
    }); 
    };//use a closure here 

var poly = new Cat("poly", "poly.jpg"); 
var chewie = new Cat("chewie", "chewie.jpg"); 
cats.push(poly); 
cats.push(chewie); 

for(i=0; i<cats.length; i++) 
{  
    var catInfo = '<div class="cats"><div id="'+cats[i].id+'"><img src='+cats[i].image_path+'><h3>'+cats[i].id+'</h3></div><div class="clickNos"><span ="label">Number of clicks</span><span class="clicks">'+cats[i].clicks+'</span></div></div>'; 
    $("#container").append(catInfo); 
    cats[i].clickInc(); 
} 


});

來源

2017-04-19 Reme

代碼不規則凹陷使得這裏這個問題很*** ***難以閱讀。只是一個提示：如果您以易於閱讀的格式顯示問題並使用正確縮進的代碼，您將更快地獲得幫助（並且任何在將來使用代碼的人也會感謝您！） – apsillers

@FelixKling'javascript'在問題中有更多的問題，只有在事件處理程序中訪問正確的'this'，包括試圖從'click'處理程序中'返回'而不是設置'.innerHTML'適當的元素，這在鏈接問題/答案 – guest271314

@ guest271314我同意並重新打開。就像Felix一樣，我不明白OP希望更新'>'元素，但現在你指出了這一點，這似乎是對問題的正確解釋。 – apsillers

this不Cat.click()處理程序中。另外，您不能從事件處理程序return。使用.next(".clickNos")與.find(".clicks")來選擇下一個.clicks元素相對於被點擊的<img>元素;設置.html()的匹配元素爲.clicksCat實例的屬性。

Cat.prototype.clickInc = function() { 
    var _cat = this; 
    $('#' + this.id).click(function() { 
     _cat.clicks++; 
     $(this).next(".clickNos").find(".clicks").html(" " +_cat.clicks); 
    }); 
    };

的jsfiddle https://jsfiddle.net/9cykvbyv/1/

來源

2017-04-19 18:32:40 guest271314

完美的作品，謝謝！ – Reme

回答

相關問題