Javascript閃存卡腳本如何獲得切換？

Question

我調整了一個手風琴腳本，以獲取一個輕便的閃存卡腳本。 它滿足了我的需求，唯一的問題是當我向下切換項目以查看答案並單擊下一步時，它將顯示帶有答案的下一個項目。 我試圖讓我的功能自動切換項目備份，但是它不起作用。 這是我的頁面

<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>

Answer 1

由於未格式化，因此很難閱讀您的代碼。 我敦促您開始使用縮進和空格。 使您的代碼更具可讀性將使其更易於理解。

解決此問題的方法是，您需要在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'); 
    });
});

小提琴： https : //jsfiddle.net/76484/0Lsaonfv/4/

Javascript閃存卡腳本如何獲得切換？

問題描述

1 個解決方案

解決方案1
0 已采納 2016-04-09 04:32:52

Javascript閃存卡腳本如何獲得切換？

問題描述

1 個解決方案

解決方案1 0 已采納 2016-04-09 04:32:52

解決方案1
0 已采納 2016-04-09 04:32:52