2 つの配列があり、どちらも投稿リクエストからのデータが入力されます。
これの目的は、「ライブ」配列に変更が加えられたときに、変更を「元の」配列と比較して、変更を見つけることができるようにすることです。
ここに私の投稿があります：
$('#dialogs').load('views/Products/managePicsDialog.php', function(){
var imageArray = [];
var originalImageArray = [];
$('#managePicsDialog').modal();
productId = 1;
$.post(ROOT+'products/fetch-thumbnails', 'pid='+productId, function(data){
imageArray = originalImageArray = data;
nextPriority = imageArray.length+1;
renderImageList(imageArray);
}, 'json')
...
最初はこれでいいと思っていたのですが、 anddataに入れます。imageArrayoriginalImageArray
私のコード全体を通して、originalImageArrayまったく触れられず、imageArray操作および変更されるだけです。
配列を比較すると、変更のたびに originalImageArray が imageArray をコピーしているように見えますが、その理由はわかりません。
function saveChanges(imageArray, originalImageArray)
{
$.each(originalImageArray, function(i, obj){
$.each(obj, function(i2, v){
if(imageArray[i][i2] != v)
{
alert('changed') // Never happens
}
})
})
}
ダイアログが開いたときに一度だけ呼び出されるメソッドをoriginalImageArray = imageArray除いて、コードのどこにも記載されていませんが、両方の配列に「それぞれ警告」すると、値が互いにコピーされることが明確に示されます。$.post
誰でも私のためにこれを解決できますか?
配列の内容はオブジェクトです。
明確にするための完全なコードは次のとおりです。
$('#productGrid').on('click', '#managePics', function(e){ // When managepics option is clicked
e.preventDefault(); // Don't go to the hyperlink...
closeMenu(); // Close the popup menu...
$('#dialogs').load('views/Products/managePicsDialog.php', function(){
var imageArray = [];
var originalImageArray = [];
$('#managePicsDialog').modal();
productId = 1;
$.post(ROOT+'products/fetch-thumbnails', 'pid='+productId, function(data){
imageArray = data;
originalImageArray = data.slice(0);
nextPriority = imageArray.length+1;
renderImageList(imageArray);
}, 'json')
$('#fileUpload').fileupload({
url: ROOT+'UploadHandler',
process: [
{
maxFileSize: 2000000000
}
],
progressInterval: 50,
add: function(e, data)
{
data.submit();
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%').html(progress+'%');
},
done: function(e, data)
{
n = $.parseJSON(data.result)
pushed = {
"id": "0",
"priority": nextPriority,
"thumb": n.files[0].thumbnail_url,
"deleted": 0
}
imageArray.push(pushed);
renderImageList(imageArray);
}
});
$('#thumbnails').on('click', 'button.delete', function(e){
$(this).closest('.span8').fadeOut('fast', function(){
$(this).detach();
});
idx = $(this).closest('.span8').data('index');
deleteImage(imageArray, idx)
})
$('#managePicsDialog').on('click', '.move-down:not(.disabled)', function(){
idx = $(this).closest('.span8').data('index');
if(imageArray[idx+1])
{
temp = imageArray[idx+1];
imageArray[idx+1] = imageArray[idx];
} else {
temp = imageArray[0];
imageArray[0] = imageArray[idx];
}
imageArray[idx] = temp;
renderImageList(imageArray)
})
$('#managePicsDialog').on('click', '.move-up:not(.disabled)', function(){
idx = $(this).closest('.span8').data('index');
if(imageArray[idx-1])
{
temp = imageArray[idx-1];
imageArray[idx-1] = imageArray[idx];
} else {
temp = imageArray[imageArray.length-1];
imageArray[imageArray.length-1] = imageArray[idx];
}
imageArray[idx] = temp;
renderImageList(imageArray)
})
$('#cancelChanges').click(cancelChanges)
$('#saveChanges').click(function(){
saveChanges(imageArray, originalImageArray)
})
})// Close dialog
})
function saveChanges(imageArray, originalImageArray)
{
// commitChanges(imageArray)
$.each(originalImageArray, function(i, obj){
$.each(obj, function(i2, v){
alert(i2+' => '+v)
})
})
$.each(imageArray, function(i, obj){
$.each(obj, function(i2, v){
alert(i2+' => '+v)
})
})
$.each(originalImageArray, function(i, obj){
$.each(obj, function(i2, v){
if(imageArray[i][i2] != v)
{
alert('changed')
}
})
})
}
function deleteImage(imageArray, index)
{
if(imageArray[index].id == 0) // If is a new image we just remove it from array.
{
imageArray.splice(index, 1);
} else { // If existing image we mark it for deletion.
imageArray[index].deleted = 1;
}
renderImageList(imageArray);
}
function renderImageList(imageArray)
{
var thumbHTML = '';
$.each(imageArray, function(i, v){
if(v.deleted == 0)
{
thumbHTML += '<div class="span8 well" data-index="'+i+'">';
thumbHTML += '<div class="span2">';
thumbHTML += '<img src="images/'+v.thumb+'" height="" width="" class="last-added">';
thumbHTML += '</div>';
thumbHTML += '<div class="span4">';
thumbHTML += '</div>';
thumbHTML += '<div class="span1">';
thumbHTML += '<button class="btn btn-info btn-100 move-up">Move up</button>';
thumbHTML += '<button class="btn btn-info btn-100 move-down">Move down</button>';
thumbHTML += '<button class="btn btn-danger btn-100 delete">Remove</button>';
thumbHTML += '</div>';
thumbHTML += '</div>';
}
})
$('#thumbnails').html(thumbHTML);
}