Javascript闪存卡脚本如何才能让它切换

我调整了一个手风琴脚本，得到了一个闪光卡脚本。它满足了我的需求，唯一的问题是当我向下切换项目以查看答案并单击"下一个"时，它会显示带有答案的下一个项目。我试着让我的功能自动切换项目，但它不起作用。这是我的页面

<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'); 
    });
});

Fiddle：https://jsfiddle.net/76484/0Lsaonfv/4/

相关内容

最新更新

热门标签：