基本的に、2 つの空の div を持つ HTML5 マークアップがあります。JQuery を使用して、単一の localStorage 値が存在するかどうかに基づいて、これらの div に 2 つの個別のフォームと 2 つの個別のフラッシュ メッセージを設定したいと考えています。私はそれを構築してきましたが、フォームを動的に表示するためのコードを書いた時点までは機能していました。誰かがこのコードをいじって、私が欠けているものを教えてもらえますか? 私は JavaScript の専門家ではありません (しかし、専門家になりたいと思っています)。編集：これまでのところ、フォームが表示されない問題を修正しました。しかし、フラッシュメッセージも表示されず、ボタンが押されると、値が localStorage に保存されなくなり、フォームが消えてから再びフェードインします。:(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shrink Once API Tools</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"></link>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<h1 class="head-title">Shrink Once API Tools</h1>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="flashAlert">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="mainFormContent">
</div>
</div>
</div>
</div>
<!-- Include JavaScript at the very bottom for faster page loads -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--
Fall back on local JQuery if Google CDN version is unavailable.
(Since most sites link the Google CDN version, it is more likely
to already be cached by the user's browser).
-->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<!-- end Fallback -->
<script src="js/bootstrap.js"></script>
<script>
$(function () {
var apiKeyForm = '<form>'
+ '<legend>Enter your API Key</legend>'
+ '<input type="text" id="apiKey" class="span12" placeholder="e.g. ab12c34d5678efgh90123i45678j90k1">'
+ '<span class="help-block">You can find your access key <a href="https://shrinkonce.com/index.php?menu=usercp#tools" target="blank">here.</a></span>'
+ '<button type="submit" id="saveAPIKey" class="btn btn-info btn-large btn-block">Save</button>'
+ '</form>';
var apiLinkForm = '<form>'
+ '<legend>Add a link or two... or more.</legend>'
+ '<button id="add" class="btn btn-large">Add</button>'
+ '<button id="remove" class="btn btn-large">Remove</button>'
+ '<button id="reset" class="btn btn-large">Reset</button>'
+ '<button type="submit" class="btn btn-info btn-large">Submit</button>'
+ '<hr />'
+ '<div id="linkForm">'
+ '</div>'
+ '</form>';
var i = $('#linkForm input').size() + 1;
$('#add').click(function () {
$('<input type="text" id="inputLink' + i + '" class="shrinklink span12" placeholder="http://google.com">').fadeIn('slow').appendTo('#linkForm');
i++;
return false;
});
$('#remove').click(function () {
if (i > 1) {
$('.shrinklink:last').fadeOut('normal', function () { $(this).remove(); });
i--;
}
return false;
});
$('#reset').click(function () {
while (i > 2) {
$('.shrinklink:last').remove();
i--;
}
return false;
});
$("#saveAPIKey").click(function () {
if (typeof $('#apiKey').val() !== null) {
localStorage.setItem(apiKey, $('#apiKey').val());
$(apiKeyForm).fadeIn('slow').appendTo('.mainFormContent');
}
else {
alert("API Key not set!");
}
return false;
});
if (localStorage.length > 0) {
$('<div class="alert alert-error">You have not yet entered your API token. Add it below, and it will be persisted in memory.</div>').fadeIn('slow').appendTo('.flashAlert');
$(apiLinkForm).fadeIn('slow').appendTo('.mainFormContent');
}
else {
$('<div class="alert alert-success">Your API token is ' + localStorage.getItem(apiKey) + '.</div>').fadeIn('slow').appendTo('.flashAlert');
$(apiKeyForm).fadeIn('slow').appendTo('.mainFormContent');
}
});
</script>
</body>