Question

我正在使用Visual Studio 2017完成学业任务。我几乎完成了所有工作。但我似乎无法创建一个本地存储，以将其与我购买的东西链接。任何人都可以帮我创建本地存储并链接它以显示我'买了'。我还想添加一个搜索功能来链接到我的本地存储，在那里我可以搜索本地存储中的什么，我的本地存储空间中填充了我买的物品

以下是我目前的代码：

HTML:

<title>ProjectPart2</title>
</head>
<body>

<div data-role="header" class="header">
    <h1 id="app-title">SMSD Project Part 2</h1>
</div>

<div role="main" class="ui-content">
    <div id="FirstPageLink" hidden>
        <div class="ui-body ui-body-a">
            <p>Welcome to Video Games Borrowing Pte Ltd</p>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <input type="text" id="EnterNRIC" name="EnterNRIC" 
placeholder="eg. S0000000A" />
            <br>
            <br>
            <br>
            <br>
            <button id="Nextbtn" class="ui-btn ui-shadow ui-btn-icon-left 
ui-corner-all">Next</button>
        </div>
    </div>
</div>

<div id="SecondPageLink" hidden>
    <form>
        <div class="ui-field-contain">
            <label for="VideoGameChoice">Video Games:</label>
            <select name="VideoGameChoice" id="VideoGameChoice">
                <option>  </option>
                <option value="1">Super Mario</option>
                <option value="2">NBA</option>
                <option value="3">Fifa 2050</option>
            </select>

            Subtotal: <span id="subTotal">$0</span>

            <fieldset data-role="controlgroup">
                <legend>Membership:</legend>
                <input type="radio" name="discountCharge" id="member" 
value="member">
                <label for="member">Member 10% OFF</label>
                <input type="radio" name="discountCharge" id="nomember" 
value="nomember">
                <label for="nomember">No member 0% OFF</label>
            </fieldset>

            <button class="ui-btn ui-corner-all" 
id="CheckPriceBtn">Confirm</button>
            <br />You have selected: <label id="yhs"></label><br />
            You will need to pay: <label id="billtopay">$0</label>

            <button class="ui-btn ui-corner-all ui-btn-inline" " 
id="buybtn">Buy</button>
            <br>
            <div id="gamelist" class="padding">
                <fieldset data-role="controlgroup" data-iconpos="right" 
id="itemlistfieldset">
                    <legend>List of Games:</legend>
                    <div id="listgames">
                    </div>
                </fieldset>
            </div>  

        </div>
    </form>
  </div>

 <div id="ThirdPageLink" hidden>
    <div id="searchpage">
        <label for="searchName">Video Game:</label>
        <input type="text" id="searchVideoGame" name="searchVideoGame" 
placeholder="eg. Super Mario" />

        <button id="search" class="ui-btn ui-shadow ui-btn-icon-left ui-
corner-all ui-icon-search">Search</button>
        <div id="searchResults" hidden>
            <table id="allResults">
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div data-role="footer" " data-fullscreen="true" data-position="fixed" 
style="overflow:hidden;">
    <div data-role="navbar">
        <ul>
            <li><a href="#" id="firstlink">Home</a></li>
            <li><a href="#" id="secondlink">Borrow</a></li>
            <li><a href="#" id="thirdlink">Search</a></li>
        </ul>
    </div>
</div>

JavaScript的：

 function onDeviceReady() {
    $("#CheckPriceBtn").click(calculate);
    $("#Nextbtn").click(fromhometoborrowpage);
    $("#VideoGameChoice").change(displayTotal);
    $("#buybtn").click(addItem);

    $("#firstlink").click(function () {
        $("#FirstPageLink").show();
        $("#SecondPageLink").hide();
        $("#ThirdPageLink").hide();
    });
    $("#secondlink").click(function () {
        $("#SecondPageLink").show();
        $("#FirstPageLink").hide();
        $("#ThirdPageLink").hide();
    });
    $("#thirdlink").click(function () {
        $("#ThirdPageLink").show();
        $("#FirstPageLink").hide();
        $("#SecondPageLink").hide();
    });

    if (localStorage['itemsArray']) {
        var itemsArray = JSON.parse(localStorage['itemsArray']);
    } else {
        var itemsArray = [];
    }

};

    $('#listgames').text("");
    for (var i = 0; i < itemsArray.length; i++) {
         $('#listgames').append("<input type='checkbox' name='item[" + i + 
"]' id= 'item[" + i + "]' value= '" + itemsArray[i] + "' 
/>").trigger('create');
         $('#listgames').append("<label for='item[" + i + "]'>" + 
itemsArray[i] + "</label>").trigger('create');
}


function fromhometoborrowpage() {
$('#FirstPageLink').hide();
$('#ThirdPageLink').hide();
$('#SecondPageLink').show();
return false;
}

function displayTotal() {
var selectedVideoGame = $('#VideoGameChoice').val();
var VideoGamePrice = '';

if (selectedVideoGame == '1') {
    VideoGamePrice = "6.90";
}
else if (selectedVideoGame == '2') {
    VideoGamePrice = "12.90";
}
else if (selectedVideoGame) {
    VideoGamePrice = "18.90";
}
$('#subTotal').text("S$ " + VideoGamePrice);
}

function calculate() {
var selectedVideoGame = $('#VideoGameChoice').val();
var selecteddiscountcharge = $('input[name=discountCharge]:checked').val();
var VideoGamePrice = '';
var VideoGameChoice = '';
var totalBill = '';

if (selectedVideoGame == "1") {
    VideoGamePrice = "6.90";
    VideoGameChoice = "Super Mario"
}
else if (selectedVideoGame == "2") {
    VideoGamePrice = "12.90";
    VideoGameChoice = "NBA";
}
else if (selectedVideoGame == "3") {
    VideoGamePrice = "18.90";
    VideoGameChoice = "Fifa 2050";
}

if (selecteddiscountcharge == "member") {
    totalBill = VideoGamePrice * 0.9;
    $('#yhs').text(VideoGameChoice + "+member");
}
else if (selecteddiscountcharge == "nomember") {
    totalBill = VideoGamePrice * 1;
    $('#yhs').text(VideoGameChoice + "+nomember");
}

$('#billtopay').text("S$ " + totalBill);
return false;
}

function addItem() {
var val = $('#VideoGameChoice').val();
$('#listgames').text("");
itemsArray.push(val);

localStorage["itemsArray"] = JSON.stringify(itemsArray);

for (var i = 0; i < itemsArray.length; i++) {
    $('#listgames').append("<input type='checkbox' name='item[" + i + "]' 
id= 'item[" + i + "]' value= '" + itemsArray[i] + "' />");
    $('#listgames').append("<label for='item[" + i + "]'>" + itemsArray[i] + 
"</label>");
}
$('#listgames').trigger('create');
return false;
};

Answer 1

首先，清除任何语法错误非常重要。

完成后，您需要查看itemsArray的范围。

因为您在onDeviceReady中定义它，所以它仅在该函数中可用。您应该在函数之外声明它，并在onDeviceReady内初始化它。

我创建了一个jsfiddle来显示我的意思，这似乎有用

带下拉框的本地存储

1 个答案: