Question

我想为一堂课制作一首互动的停电诗。 This is a blackout poem btw，我可以看到当我检查他们有{{。停电编辑风格。这是我可以借用的吗？

我已经浏览了W3学校的HTML和CSS文本和链接样式的基本教程，但我找不到任何符合我想要的方式。我想使用标准文本和每个单词来＆＃34;停电＆＃34;当用户点击它时，最终结果是用户只能在屏幕上看到未涂黑的单词。

有什么想法吗？ TIA，我对编码非常陌生。

Answer 1

示例：

<span>Here </span>
<span>are </span>
<span>some </span>
<span>words </span>
<span>for </span>
<span>a </span>
<span>poem </span>

<script>
    $("span").on("click", function() {
        $(this).css("background", "black");
    }); 
</script>

<style>
    span {
      cursor:pointer;
    }
</style>

行动中：https://jsfiddle.net/kylemartin/f16okqsq/

当然，我的例子没有取消停电的机制，但这就像检查跨度的背景颜色一样简单，如果＆＃＆＃ 39;黑色，然后不是黑色。

我认为这可以满足您的需求。如果没有，请告诉我，我可以改进它。它有点难看，但它实现了目标。

此代码的作用：

我们所做的是将所有单词放入自己的中。我们需要这个，以便每个单词都是它自己的可点击单元＆＃34;。然后我们创建我们的Javascript点击处理程序，该处理程序侦听之一的任何点击。当有人点击其中一个时，我们会将的背景颜色更改为黑色。我刚刚添加了CSS以获得良好的衡量标准。顺便说一句，CSS <style>标记应该放在HTML文件的<head>中（或者放在外部样式表中）。

此代码的问题：

显然，这有一个主要问题 - 你不能突然发现＆＃34;这些话。但是，这就像在您的点击处理程序中添加if语句一样简单，该语句会检查所点击的的背景颜色。如果没有背景，请将其设为黑色。如果有黑色背景，请删除背景。我会让你自己解决这个问题。 :)（良好的学习经历）

艺术项目的停电文本

1 个答案: