編集私は単純化しました
out.push('<li>' + clicks[i].target + outputTime + 'm</li>');
}
(".taskList ul li p").html(out.join(''));
に
$(".taskList ul li p").html(outputTime);
/EDIT フィールドが変更されたときにタイマーを開始するコールバック関数を備えた jQuery Jeditable プラグインを使用しています。
ボタンがクリックされると、Jedit イベントとクリック イベントの間の時間が計算され、その値が編集済みの '..click to edit' テキストの横にある dom に配置されます。この Div 全体が新しいセクションに移動する前に、タイマーはリセットされ、元のインスタンスの代わりに新しい Jeditable インスタンスが作成されます。
私の困難は、コードのタイマー部分の多くを、別のスタック オーバーフロー ポストhttp://jsfiddle.net/wwnyY/11/で見つけた jsfiddle から取得したことです。これからの出力は、結果の前に # 文字を配置しています。
タイマー コードが push() メソッドを使用していて、これが配列を返していることがわかりました。これが私の余分な文字の由来だと思います。プログラミングに関する限り、配列は私の現在のつまずきのブロックであり、配列を適切に処理して # を削除する方法、または以下のコードでそれを置き換える方法を誰かが説明できるかどうか疑問に思いました (外部jsfiddle のリンクなので、コードを投稿しましたhttp://binarygeometry.net/test/index.html )
<div class="row">
<div class="eight columns">
<div class="row taskList">
<ul>
<li>
<div class="nine columns task">
<div class="edit">
..click to edit
</div>
</div>
<div class="three columns time">
<p>00.00</p>
</div>
</li>
</ul>
</div>
<ul class="row doneList">
<li>
</li>
</ul>
</div>
<div class="four columns">
<p><a href="#" class="success button" id="done">Go!</a></p>
</div>
</div>
$(document).ready(function() {
$(".edit").editable("echo.php", {
placeholder : "Click me to edit",
loadtype : "POST",
callback: function(value, settings) {
startTime = new Date().getTime();
console.log(startTime);
}
});
$("#done").click(function(e){
function update_output() {
var out = [],
displayTime;
for (var i = 0, len = clicks.length; i < len; i++) {
displayTime = (clicks[i].time - startTime);
console.log(displayTime);
outputTime = displayTime //* 0.00001666666;
console.log(outputTime);
outputTime = outputTime.toFixed(0);
console.log(outputTime);
out.push('<li>' + clicks[i].target + outputTime + 'm</li>');
}
$(".taskList ul li p").html(out.join(''));
}
var clicks = [];
clicks.push({ time : new Date().getTime(), target : $(this).attr('href') });
update_output();
$(".taskList ul li").appendTo(".doneList")
$(".edit").removeClass("edit").unbind("click.editable");
$("<li><div class='nine columns task'><div class='edit'>..click to edit</div><div class='three columns time'><p></p></div></li>")
.appendTo(".taskList ul");
$(".edit").editable("echo.php", {
placeholder : "Click me to edit",
loadtype : "POST",
callback: function(value, settings) {
startTime = new Date().getTime();
console.log(startTime);
}
});
e.preventDefault();//
});
});