私は、バスケットに挿入されたアイテムがBasketItemNumber_I[ここで int であり、他のすべてのアイテムが名前で i++ を取得する] という名前の jStorage キーに挿入される e ショップに取り組んでいます。
例: BasketItemNumber_1、BasketItemNumber_2 など。
ここで、私のクライアントは、クライアントが + 1 および - 1 関数を使用せずに int を変更できるように、アイテムのピースの数が入る入力を追加するように依頼しました。
かごの中に 1 つのアイテムがあるとします。この項目をコンソールに表示すると、次のようになります。
ここでの目標は、オブジェクトの部分の値を、ユーザーが入力に書き込んだ値に変更することです。したがって、アイテムには次のような onfocusout 関数があります。
function onFocusOutFunction(jStorageItemName, i) {
console.log(jStorageItemName + " Focus Out");
var jStorageFocusedOutBasketPiece = $.jStorage.get(jStorageItemName);
console.log("jStorageFocusedOutBasketPiece: " + jStorageFocusedOutBasketPiece[0].piece);
var inputFocusedOutBasketPiece = document.getElementById('pieceInput_' + i).value;
inputFocusedOutBasketPiece = inputFocusedOutBasketPiece.replace(/\D/g,'');
console.log("inputFocusedOutBasketPiece: " + inputFocusedOutBasketPiece);
function isNumber(obj) { return !isNaN(parseFloat(obj)) }
console.log(isNumber(inputFocusedOutBasketPiece));
if (inputFocusedOutBasketPiece == jStorageFocusedOutBasketPiece[0].piece){
console.log("Values are the same");
}else {
console.log("Values are not the same, therefore piece value will be changed");
console.log("Before change");
console.log(jStorageFocusedOutBasketPiece);
jStorageFocusedOutBasketPiece[0].piece = parseInt(inputFocusedOutBasketPiece);
$.jStorage.set(jStorageItemName, jStorageFocusedOutBasketPiece[0]);
$.jStorage.setTTL(jStorageItemName, 604800000);
console.log("After the change");
console.log(jStorageFocusedOutBasketPiece);
console.log("After jStorage set");
console.log(jStorageItemName);
console.log($.jStorage.get(jStorageItemName));
window.location.assign('basket.php');
}
}
しかし、値を変更するたびに（この関数がそれを実行できるように）。BasketItemNumber_1 の出力は次のようになります。
コードのこの部分でチェックする必要があるため、アイテムはバスケットにリストされていません: (eval を使用していることはわかっていますが、これは悪い習慣です。後でこれを変更する予定です。今は証明を完了する必要があります。実際の製品ではありません)。
for (var i = 1, len = jStorageIndex.length; i < len; i++){
jStorageItemContents = eval("$.jStorage.get('BasketItemNumber_" + i + "')");
jStorageItemName = "BasketItemNumber_" + i
if (typeof jStorageItemContents == "undefined" || ! (jStorageItemContents instanceof Array)) {
console.log("An array is empty, skipping.");
}else {
if(jStorageItemContents[0].active == "true"){
... 等々。
基本的にアイテムは表示されませんが、コンソールに「配列が空です。スキップしています」と表示されます。
BasketItems が空になることがあるため (ユーザーが削除した後、空の配列がキャッシュに残ることがあります)、上記のロジックを使用する必要があるため、実際に何かを含むものだけを表示したいと考えています。
したがって、私は尋ねなければなりません: オブジェクトの表現方法を正確に変更した理由は何ですか?
違いは、コンソール、より具体的には [] と {} に出力される方法にありますが、何がその変更を可能にしたのか、どのように進めればよいのかわかりません。
オブジェクトの値を変更した後、以前の形式に一致するように Object の表現方法を変更して、上記の typeof ロジックをいじる必要がないようにしたいと思います。 .
注: それぞれピースの値を変更する + と - ボタンもあります。
これらの機能は次のとおりです。
$(document).on('click', '#addPieceButton', function(){
var variable = $(this).attr('itemname');
var variable = variable.toString();
var basketItem = $.jStorage.get(variable);
basketItem[0].piece = parseInt(basketItem[0].piece) + 1;
console.log(basketItem[0].piece);
$.jStorage.set(variable, basketItem);
$.jStorage.setTTL(variable, 604800000);
console.log($.jStorage.get(variable));
location.reload(true);
});
$(document).on('click', '#removePieceButton', function(){
var variable = $(this).attr('itemname');
var variable = variable.toString();
var basketItem = $.jStorage.get(variable);
basketItem[0].piece = parseInt(basketItem[0].piece) - 1;
if(basketItem[0].piece == 0){ //If there is 0, we will show the warning
if (window.confirm("By changing the pieces to 0 the item will disappear? Do you want to continue?")) {
//This will change the active to false, thanks to which it will be no longer displayed
for (var i in basketItem) {
if (basketItem[i].active == "true") {
basketItem[i].active = "false";
break; //Stop this loop, we've found it!
}
}
$.jStorage.set(variable, basketItem);
$.jStorage.setTTL(variable, 604800000);
console.log($.jStorage.get(variable));
location.reload(true);
}
else {
console.log("User answered NO");
location.reload(true);
}
}else {
console.log(basketItem[0].piece);
$.jStorage.set(variable, basketItem);
$.jStorage.setTTL(variable, 604800000);
console.log($.jStorage.get(variable));
location.reload(true);
}
});
そしてそれらは完全に機能します。これを書き留めてみると、問題のある関数にjQueryを使用していないことに、その理由がどこかにあるのではないかと感じています。