如何在某物周围画一个圆圈？

Question

使用html、css、javascript和jQuery，我想呈现给用户一个带有指示的段落：“读故事。然后，圈出所有的名词。”

问题：当用户点击单词时，如何在其周围画一个圆圈？ 如果每个单词都必须在自己的标签中，那也可以。

- Phillip Senn

---

让用户“下划所有名词”不是更容易吗？ - Pleun

好的评论。我想我只是没有创造性地思考。但是展示一个慢慢绘制（1秒钟）在单词周围的圆圈会很有趣。 - Phillip Senn

是的，我同意那确实很不错。 - Pleun

Answer 1

以下是HTML代码：

以下是HTML代码：

<p id="circleNouns">Now is the time for all good men to come to the aid of their country.</p>

首先，让我们使用jQuery将文本中的每个单词用<span>标签包装起来：

var $cn = $('#circleNouns'),
    cnText = $cn.text();
cnText = cnText.replace(/\s/g, '</span> <span>');
$cn.html('<span>' + cnText + '</span>');

如果我们为一个类设置样式，用于绘制圆形边框:

.selected { 
    border:1px solid red;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
}

我们可以简单地添加以下点击事件：

$cn.find('span').click(function(e) {
    $(this).toggleClass('selected');
});

无论页面如何提交，您都可以检查$cn.find（'.selected'）中的每个 .html（）是否与您的名词列表匹配以查看答案是否正确。 这里有一个有效的示例→

- mVChr

---

哇，mVChr！我要学习你在Stackoverflow上提供的所有答案，因为你太厉害了。我真的很感激这个答案。 - Phillip Senn

哈哈，谢谢。如果你想在Javascript和jQuery方面变得更好，我也从jAndy的答案中学到了很多。 - mVChr

这篇文章很老，但我喜欢这个答案并想做一个小改进：在.selected类中添加margin: 0px -1px;将避免边框圆圈绘制后文本的移动。 - Dane Hillard

Answer 2

您可以使用不同大小的透明PNG图像，小、中、大来圈出不同大小的单词。

因此，当用户点击span/div时，使用JavaScript在单词上叠加该PNG，并动态调整其大小以获得最佳大小。

但我仍然建议为什么不使用简单的基于HTML的边框来标记它？它可以是带有圆角边缘的边框，通过一些CSS使其更加精美。

- DhruvPathak

---

哦，是啊！我可以使用 border-radius CSS。那是个好主意！ - Phillip Senn

当然可以，希望您不想让IE6用户参加您的语法测试，因为IE6已经反映了他们很多问题。 - DhruvPathak