我需要的是通过单击将文本“____”来回更改为“单词”。我不想有一个按钮。
我看到this page准确地描述了我所需要的，特别是仅CSS方式，但是当我在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>
最佳答案
这是将满足您要求的代码。
<!DOCTYPE html>
<html>
<body>
This is a paragraph. Click on the next word -> <span id="word" onclick="toggle()">____</span> <- 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>