【问题标题】：How to swap text back and forth when clicking on it?单击文本时如何来回交换文本？
【发布时间】：2016-08-06 15:31:40
【问题描述】：

我需要通过单击将文本____（一个间隙）来回交换到Word。我不想有按钮。用户应该只需要点击间隙的位置。

我看到 this page 准确地描述了我需要的东西，尤其是 CSS-Only 方式，但是当我在 TryIt 编辑器上尝试时，它或 jQuery-Way 都不起作用。

这是 CSS 方式：

</style>
#example {
 position: relative; 
} 
#example-checkbox {
 display: none;
} 
#example-checkbox:checked + #example:after {
 content: "Hide";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: white;
 }
</style>

<input id="example-checkbox" type="checkbox">
<label for="example" id="example">Show</label>

【问题讨论】：

问题的htmlhtml的文本""____""在哪里？
哦，给定的代码是从链接中复制的。应该换成Show

标签： javascript jquery html css text

【解决方案1】：

这是满足您要求的代码。

<!DOCTYPE html>
<html>

<body>
  This is a paragraph. Click on the next word -&gt; <span id="word" onclick="toggle()">____</span> &lt;- Have you clicked on previous word.

  <p id="demo"></p>

  <script>
    function toggle() {
      var word = document.getElementById("word").innerHTML;
      if (word.split('_').join('').trim().length === 0) {
        document.getElementById("word").innerHTML = "word";
      } else {
        document.getElementById("word").innerHTML = "_____";
      }
    }
  </script>
</body>

</html>

有多个隐藏词

在下面的代码中，只需查看代码中<head> 部分的脚本即可。

  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
  </script>

在这里，您只需在数组words 中推送要与_____ 切换的单词。一旦单词被推入这个数组，它们就会自动转换为下划线。只需从段落中推入此数组中的任何不同单词，然后自己查看转换。

span {
  color: red
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
  </script>

</head>

<body>

  <p id="demo">A vocabulary is a list of words that an individual knows or uses regularly. vocabulary is different from lexicon because vocabulary is about what an individual or group of people know, whereas lexicon is about the language itself.
  </p>

  <script>
    function toggle(element) {
      if (element.innerHTML.split('_').join('').trim().length === 0) {
        element.innerHTML = element.getAttribute("word");
      } else {
        element.innerHTML = "_______";
      }
    }

    $.each(words, function(index, value) {
      var replacestr = new RegExp(value, "g");
      $("p#demo:contains('" + value + "')").html(function(_, html) {
        return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)"> ' + value + ' </span>')
      });
    });
  </script>
</body>

</html>

使`________`在页面加载时首先出现

只需替换

return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)"> ' + value + ' </span>')

与

return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)">____________</span>')

最终代码为：

span {
  color: red
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
  </script>

</head>

<body>

  <p id="demo">A vocabulary is a list of words that an individual knows or uses regularly. vocabulary is different from lexicon because vocabulary is about what an individual or group of people know, whereas lexicon is about the language itself.
  </p>

  <script>
    function toggle(element) {
      if (element.innerHTML.split('_').join('').trim().length === 0) {
        element.innerHTML = element.getAttribute("word");
      } else {
        element.innerHTML = "_______";
      }
    }

    $.each(words, function(index, value) {
      var replacestr = new RegExp(value, "g");
      $("p#demo:contains('" + value + "')").html(function(_, html) {
        return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)">_______</span>')
      });
    });
  </script>
</body>

</html>

复数和单数均可

只需换行：

var replacestr = new RegExp(value, "g");

到：

var replacestr = new RegExp('\\b'+value+'\\b', "g");

最终的代码如下所示：

span {
  color: red
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
    words.push('lexicons');
    
  </script>

</head>

<body>

  <p id="demo">A vocabulary is a list of words that an individual knows or uses regularly. vocabulary is different from lexicon because vocabulary is about what an individual or group of people know, whereas lexicon is about the language itself. In this paragraph, lexicons is a new word that's added, so don't forget to push 'lexicons' in your array.
  </p>

  <script>
    function toggle(element) {
      if (element.innerHTML.split('_').join('').trim().length === 0) {
        element.innerHTML = element.getAttribute("word");
      } else {
        element.innerHTML = "_______";
      }
    }

    $.each(words, function(index, value) {
      var replacestr = new RegExp('\\b'+value+'\\b', "g");
      $("p#demo:contains('" + value + "')").html(function(_, html) {
        return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)">_______</span>')
      });
    });
  </script>
</body>

</html>

【讨论】：

我把它放在一个站点上，它可以工作，而另一个站点则不行。我打开一个新问题来调试这个，希望在那里见到你。 How to start debugging jQuery if there seems to be no error?

【解决方案2】：

这是你所期望的吗？

<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>

注意label 中的for 属性-它必须具有input 复选框的id

#example {
  position: relative;
  cursor: pointer;
}
#example-checkbox {
  display: none;
}
#example-checkbox:checked + #example:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>

【讨论】：

【解决方案3】：

标签的for 属性必须包含复选框的ID

#example {
  position: relative;
}
#example-checkbox {
  display: none;
}
#example-checkbox:checked + #example:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>

【讨论】：

【解决方案4】：

<label id="example-five" for="example-five-checkbox">_____</label>

参考： https://jsfiddle.net/n1rb2y57/ 但请注意在 css 中选择与网站颜色匹配的适当背景颜色。

【讨论】：

有多个隐藏词

使________在页面加载时首先出现

复数和单数均可

使`________`在页面加载时首先出现