有多个隐藏的单词

Question

我需要的是通过点击将文本“____”来回更改为“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>

Answer 1

这是你期望的吗？

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

请注意for中的label属性 - 它必须包含id复选框的input

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

Label的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>

Answer 3

这是符合您要求的代码。

＆＃13;

<!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>

＆＃13;

有多个隐藏的单词

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

  <script>
    var words = [];

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

在这里，您只需要在数组_____中使用words来切换要切换的字词。一旦在这个数组中推送了单词，它们就会自动转换为下划线。只需从段落中推送此数组中的任何其他单词，然后自己查看转换。

＆＃13;

span {
  color: red
}

＆＃13;

<!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>

＆＃13;

在页面加载

时首先显示________

只需替换

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>')

最终代码为：

＆＃13;

span {
  color: red
}

＆＃13;

<!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>

＆＃13;

复数和单身

只需更改一行：

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

为：

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

最终代码如下：

＆＃13;

span {
  color: red
}

＆＃13;

<!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>

＆＃13;

Answer 4

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

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

单击时如何来回切换文本？

4 个答案:

有多个隐藏的单词

在页面加载

复数和单身