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

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

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

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

然后，无论页面提交，您都可以检查$cn.find('.selected')每个.html()对着您的名词列表，看看答案是否正确。

Answer 2

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

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

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