Скриншот флеш-карты Javascript, как я могу получить его для переключения?

Я изменил скрипт аккордеона, чтобы получить легкий флеш-карточный скрипт. Он отвечает моим потребностям, единственная проблема заключается в том, когда я переключаю элемент, чтобы увидеть ответ, и нажимаю дальше, он показывает следующий элемент с ответом. Я попытался заставить свою функцию автоматически переключаться на элемент, но он не работает. Вот моя страницаСкриншот флеш-карты 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>

источник

2016-04-08 user3357814

Можете ли вы сделать jsfiddle – osmanraifgunes

здесь является jsfiddle https://jsfiddle.net/zardax/0Lsaonfv/ – user3357814

Это так трудно читать код из-за того, что она не отформатирована. Я настоятельно призываю вас начать использовать отступы и пробелы; делая ваш код более удобочитаемым, будет легче понять.

Решение проблемы заключается в том, что вам необходимо сдвинуть элемент #accordion-content в каждом из ваших обработчиков кликов myFunctionNext и myPrevious. Чтобы изменить идентификацию после, содержимое закончило сбой, вы должны взять существующие тела функций и поместить их в обратный вызов до slideUp. В результате получим:

function myFunctionNext() { 
    $('#accordion-content').slideUp(function() { 
     // existing myFunctionNext body goes here. 
    }); 
} 

function myPrevious() { 
    $('#accordion-content').slideUp(function() { 
     // existing myPrevious body goes here. 
    }); 
}

Теперь, когда у нас есть работа, мы можем передумать рефакторинг. Я думаю, что ваш код может быть значительно улучшен.

Мы можем помочь себе, указав лучшие имена нашим переменным. «a» - ужасное имя для индекса; и наши методы не должны иметь префикс «мой». Мы можем кэшировать наши элементы #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/

источник

2016-04-09 04:32:52 76484

Спасибо миллион !!! Это действительно помогает – user3357814

Скриншот флеш-карты Javascript, как я могу получить его для переключения?

ответ

Смежные вопросы