javascript - jquery 和 css 解决方案来切换显示/隐藏与 html 中的文本

Question

所以我创建了以下显示/隐藏 div 的 jquery。

$(document).ready(function(){
  $("#me").hide();
  $("#hide").click(function(){
    $("#me").hide();
  });
  $("#show").click(function(){
    $("#me").show();
  });
});

这是一些文本隐藏显示

http://jsfiddle.net/6DTeq/7/ 它工作正常。但我需要让它工作，这样我就需要切换显示和隐藏，而不是单独显示和隐藏文本。但主要问题是我不想将 javascript 文件中的文本用于国际化目的。如果文本驻留在 html 中就可以了。有人可以帮我弄这个吗？

Answer 1

网页：

<div id="me"> This is some text</div>
<div id="toggle">toggle</div>

JS：

$("#toggle").click(function(){
  $("#me").toggle();
});

演示-----> http://jsfiddle.net/6DTeq/8/

更新了小提琴 -----> http://jsfiddle.net/6DTeq/13/

Answer 2

试试这个

$(document).ready(function(){
  $("#me").hide();
  $("#hide").click(function(){
      $("#me").toggle();
      $(this).text(function(i, val) {
          return val === 'Show' ? 'Hide' : 'Show';
      });
  });
});

检查小提琴

Answer 3

<div id="me" style="display:none;"> This is some text</div>
<div id="clickContainer">
    <div id="hide" style="display:none;">Hide</div>
    <div id="show">Show</div>
</div>

$(document).ready(function(){
    $("#clickContainer").click(function(){
        $("#me").toggle();
        $("#hide").toggle();
        $("#show").toggle();
    });
})

Answer 4

试试看：

http://jsfiddle.net/6DTeq/10/

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#me").toggle();
        $(this).text(function(){return $('#me:visible').length?'Hide':'Show'});
    }).triggerHandler('click');
});