数据双向切换文本答案

【问题标题】：Data Toggle text in both direction数据双向切换文本
【发布时间】：2014-03-31 21:37:59
【问题描述】：

我正在尝试使用数据切换文本“显示更多”和“显示更少”，我的脚本几乎可以工作，但我需要它在变成文本“显示更少”并继续切换“显示更多”时停止”和“少显示”。我的功能中缺少什么？

这是我的 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);
});

});

【问题讨论】：

标签： javascript jquery toggle jsfiddle jquery-data

【解决方案1】：

var txt = "Show More" ? $('#toggle').data("less") : $('#toggle').data("more");

坏了，它总是把“显示更多”放在 txt 中。尝试这样的事情：

   $(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");
            }
        });
    });

【讨论】：

【解决方案2】：

Here you go:

  $(function() {
    $(".scorer_filter").on("click", ".hide_full_list", function(){
      var txt = $(this).text() == "Show More" ? $(this).data("less") : $(this).data("more");
      $(this).text(txt);
    });
  });

【讨论】：

【解决方案3】：

您没有在代码中测试“txt”变量。你应该这样做：

var txt = $('#toggle').text();
txt = (txt == "Show More") ? $('#toggle').data("less") : $('#toggle').data("more");

http://jsfiddle.net/3Ndcg/2/

【讨论】：