你怎么画一个圆周围的东西？

Question

使用html，css，javascript和jQuery，我想向用户展示一个带有方向的段落：“阅读故事。然后，圈出所有名词。”

问：当用户点击它时，我如何围绕单词绘制圆圈？ 如果每个单词都必须在自己的span标签中，那就没关系了。

Answer 1

对于以下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>');

然后，如果我们设置一个类来绘制一个像border一样的圆：

.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()，看看答案是否正确。

Here's a working example →

Answer 2

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

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

但我仍然建议为什么不使用简单的基于HTML的边框来标记它？它可以是带有圆形边缘的边框，带有较小的css，使其更加花哨