Javascript 闪存卡脚本如何让它切换？
Javascript flash card script how can I get it to toggle?
我调整了手风琴脚本以获得光闪存卡脚本。它满足了我的需求，唯一的问题是当我向下切换项目以查看答案并单击下一步时，它会显示下一个带有答案的项目。我试图让我的功能自动切换项目，但它不起作用。这是我的页面
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function($) {
$('#accordion').find('#accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
//$("#accordion-content").not($(this).next()).slideUp('fast');
});
});
</script>
<style>
#accordion-toggle {cursor: pointer; margin: 0; font-size:22; }
#accordion-content {display: none;font-size:22; }
#accordion-content.default {display: block;}
#accordion {align: center; text-align: center;}
</style>
</head>
<body>
<div id="accordion" >
<h3>Click on next or previous to see the idioms in English. Click on the
idiom to see the equivalent in French</h1>
<br>
<h4 id="accordion-toggle"></h4>
<div id="accordion-content">
<p></p>
</div>
<div align="center">
<br>
<button onclick="myFunctionNext()">Previous</button>
<button onclick="myPrevious()">Next</button>
</div>
<script>
var idioms = ["Once bitten twice shy", "Chat échaudé craint l'eau froide",
"Drive a hard bargain","Etre dur en affaires","To bone up","Bachoter","It
takes all sorts to make a world","Il faut de tout pour faire un monde",
"Chasing shadows", "Lacher la proie pour l'ombre", "To run out of
steam","Etre à bout de souffle"];
var a = 0;
function myFunctionNext() {
myVar="Hello world";
a=a+2;
if( a>idioms.length-1){
a=a-idioms.length;}
var idiomen = idioms[a];
var idiomfr = idioms[a+1];
document.getElementById("accordion-toggle").innerHTML = idiomen;
document.getElementById("accordion-content").innerHTML = idiomfr;
}
function myPrevious() {
a=a-2
if( a>idioms.length-1){
a=a-idioms.length;}
if( a<0){
a=a+idioms.length;}
var idiomen = idioms[a];
var idiomfr = idioms[a+1];
document.getElementById("accordion-toggle").innerHTML = idiomen;
document.getElementById("accordion-content").innerHTML = idiomfr;
}
</script>
</div>
</body>
</html>
由于代码未格式化，因此难以阅读您的代码。我敦促你开始使用缩进和空格；使您的代码更具可读性将使它更容易理解。
您的问题的解决方案是您需要在每个 myFunctionNext 和 myPrevious 单击处理程序中向上滑动 #accordion-content 元素。为了在 内容完成折叠后使习惯用法更改 ，您应该获取现有的函数体并将它们放入 slideUp 的回调中。结果将是：
function myFunctionNext () {
$('#accordion-content').slideUp(function () {
// existing myFunctionNext body goes here.
});
}
function myPrevious () {
$('#accordion-content').slideUp(function () {
// existing myPrevious body goes here.
});
}
现在我们已经开始工作了，我们可以下定决心进行重构了。我认为您的代码可以改进很多。
我们可以通过给变量起更好的名字来帮助自己。 "a" 是一个糟糕的索引名称；我们的方法不应该以 "my" 为前缀。我们可以缓存 #accordion-toggle 和 #accordion-content 元素以提高效率。最后，让我们分解我们的方法并给它们起描述性名称，以帮助阐明我们的代码在做什么。
重构后的 JavaScript 将是：
var idioms = [
"Once bitten twice shy",
"Chat échaudé craint l'eau froide",
"Drive a hard bargain",
"Etre dur en affaires",
"To bone up","Bachoter",
"It takes all sorts to make a world",
"Il faut de tout pour faire un monde",
"Chasing shadows",
"Lacher la proie pour l'ombre",
"To run out of steam",
"Etre à bout de souffle"
];
var index = 0;
var increment = 2;
var $accordion_toggle = $('#accordion-toggle');
var $accordion_content = $('#accordion-content');
function incrementIndex () {
index += increment;
if (index >= idioms.length) {
index = 0;
}
}
function decrementIndex () {
index -= increment;
if (index < 0) {
index = (idioms.length - increment);
}
}
function updateIdioms () {
$accordion_toggle.html(idioms[index]);
$accordion_content.html(idioms[index + 1]);
}
function onNextClick () {
$accordion_content.slideUp(function () {
incrementIndex();
updateIdioms();
});
}
function onPreviousClick () {
$accordion_content.slideUp(function () {
decrementIndex();
updateIdioms();
});
}
$(function () {
updateIdioms();
$('#Next').click(onNextClick);
$('#Previous').click(onPreviousClick);
$accordion_toggle.click(function () {
$accordion_content.slideToggle('fast');
});
});
我调整了手风琴脚本以获得光闪存卡脚本。它满足了我的需求，唯一的问题是当我向下切换项目以查看答案并单击下一步时，它会显示下一个带有答案的项目。我试图让我的功能自动切换项目，但它不起作用。这是我的页面
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function($) {
$('#accordion').find('#accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
//$("#accordion-content").not($(this).next()).slideUp('fast');
});
});
</script>
<style>
#accordion-toggle {cursor: pointer; margin: 0; font-size:22; }
#accordion-content {display: none;font-size:22; }
#accordion-content.default {display: block;}
#accordion {align: center; text-align: center;}
</style>
</head>
<body>
<div id="accordion" >
<h3>Click on next or previous to see the idioms in English. Click on the
idiom to see the equivalent in French</h1>
<br>
<h4 id="accordion-toggle"></h4>
<div id="accordion-content">
<p></p>
</div>
<div align="center">
<br>
<button onclick="myFunctionNext()">Previous</button>
<button onclick="myPrevious()">Next</button>
</div>
<script>
var idioms = ["Once bitten twice shy", "Chat échaudé craint l'eau froide",
"Drive a hard bargain","Etre dur en affaires","To bone up","Bachoter","It
takes all sorts to make a world","Il faut de tout pour faire un monde",
"Chasing shadows", "Lacher la proie pour l'ombre", "To run out of
steam","Etre à bout de souffle"];
var a = 0;
function myFunctionNext() {
myVar="Hello world";
a=a+2;
if( a>idioms.length-1){
a=a-idioms.length;}
var idiomen = idioms[a];
var idiomfr = idioms[a+1];
document.getElementById("accordion-toggle").innerHTML = idiomen;
document.getElementById("accordion-content").innerHTML = idiomfr;
}
function myPrevious() {
a=a-2
if( a>idioms.length-1){
a=a-idioms.length;}
if( a<0){
a=a+idioms.length;}
var idiomen = idioms[a];
var idiomfr = idioms[a+1];
document.getElementById("accordion-toggle").innerHTML = idiomen;
document.getElementById("accordion-content").innerHTML = idiomfr;
}
</script>
</div>
</body>
</html>
由于代码未格式化，因此难以阅读您的代码。我敦促你开始使用缩进和空格；使您的代码更具可读性将使它更容易理解。
您的问题的解决方案是您需要在每个 myFunctionNext 和 myPrevious 单击处理程序中向上滑动 #accordion-content 元素。为了在 内容完成折叠后使习惯用法更改 ，您应该获取现有的函数体并将它们放入 slideUp 的回调中。结果将是：
function myFunctionNext () {
$('#accordion-content').slideUp(function () {
// existing myFunctionNext body goes here.
});
}
function myPrevious () {
$('#accordion-content').slideUp(function () {
// existing myPrevious body goes here.
});
}
现在我们已经开始工作了，我们可以下定决心进行重构了。我认为您的代码可以改进很多。
我们可以通过给变量起更好的名字来帮助自己。 "a" 是一个糟糕的索引名称；我们的方法不应该以 "my" 为前缀。我们可以缓存 #accordion-toggle 和 #accordion-content 元素以提高效率。最后，让我们分解我们的方法并给它们起描述性名称，以帮助阐明我们的代码在做什么。
重构后的 JavaScript 将是：
var idioms = [
"Once bitten twice shy",
"Chat échaudé craint l'eau froide",
"Drive a hard bargain",
"Etre dur en affaires",
"To bone up","Bachoter",
"It takes all sorts to make a world",
"Il faut de tout pour faire un monde",
"Chasing shadows",
"Lacher la proie pour l'ombre",
"To run out of steam",
"Etre à bout de souffle"
];
var index = 0;
var increment = 2;
var $accordion_toggle = $('#accordion-toggle');
var $accordion_content = $('#accordion-content');
function incrementIndex () {
index += increment;
if (index >= idioms.length) {
index = 0;
}
}
function decrementIndex () {
index -= increment;
if (index < 0) {
index = (idioms.length - increment);
}
}
function updateIdioms () {
$accordion_toggle.html(idioms[index]);
$accordion_content.html(idioms[index + 1]);
}
function onNextClick () {
$accordion_content.slideUp(function () {
incrementIndex();
updateIdioms();
});
}
function onPreviousClick () {
$accordion_content.slideUp(function () {
decrementIndex();
updateIdioms();
});
}
$(function () {
updateIdioms();
$('#Next').click(onNextClick);
$('#Previous').click(onPreviousClick);
$accordion_toggle.click(function () {
$accordion_content.slideToggle('fast');
});
});