Данные Переключить текст в обоих направлениях
Я пытаюсь переключить текст "Показать больше" и "Показать меньше" с данными, мой сценарий почти работает, но мне не нужно его останавливать, когда он превращается в текст "Показать меньше", и продолжаю переключать "Показать больше" и " Показать меньше ". Что мне не хватает в моей функции?
Вот мой jsfiddle: http://jsfiddle.net/Manna/3Ndcg/1/
<div class ="scorer_filter">
<a href="#" class="hide_full_list" data-less="Show Less" data-more="Show More" data-table-id="32301" id="toggle">Show More</a>
</div>
$(function() {
$(".scorer_filter").on("click", ".hide_full_list", function(){
var txt = "Show More" ? $('#toggle').data("less") : $('#toggle').data("more");
$('#toggle').text(txt);
});
});
3 ответа
Решение
Вы не тестируете переменную "txt" в своем коде. Вы должны были сделать:
var txt = $('#toggle').text();
txt = (txt == "Show More") ? $('#toggle').data("less") : $('#toggle').data("more");
$(function() {
$(".scorer_filter").on("click", ".hide_full_list", function(){
var txt = $(this).text() == "Show More" ? $(this).data("less") : $(this).data("more");
$(this).text(txt);
});
});
var txt = "Show More" ? $('#toggle').data("less") : $('#toggle').data("more");
сломан, он всегда будет помещать "Показать больше" в текстовом формате. Попробуйте что-то вроде этого:
$(function() {
$(".scorer_filter").on("click", ".hide_full_list", function(){
if ($('#toggle').data("less")) {
$('#toggle').data("less",false).text("Show less");
} else {
$('#toggle').data("less",true).text("Show more");
}
});
});