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

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>

首先,让我们<span>用jQuery 包装标签中的每个单词:

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