Javascript 设置文本下划线单选按钮的样式

因此，我将有文本：“牛津……真实的例子”和需要加下划线的短语，并在下面有一个单选选项（图片中没有单选按钮，但我也需要一个单选按钮供用户选择）

如何使用css和javascript实现这一点

---

谢谢大家的帮助

我相信这就是你想要的：

　　

（为了简单起见，我在示例中使用了）

var list=[“The”，“well known”，“means”，“to give”]//词表
变量输出=$（“#输出”），
html=output.html（）；
对于（变量i=0；ispan”）。每个函数（i）{//为每个函数创建索引
var x=$（this）.offset（）.left，//获取x
y=$（this.offset（）.top，//获取y
宽度=+$（this）.width（），//获取宽度
$select=$（“”）。addClass（“select”）；
$select.css({
顶部：y+20，
左:x,，
宽度：宽度
})
.html（String.fromCharCode（65+i））//设置索引（A、B、C…）
.appendTo（“body”）；//将其附加到容器中
});

（该示例将在调整窗口大小时自动重新计算位置。）

---

这是实现它的一种方法，还有很多其他方法。就我个人而言，我更喜欢这个，因为理解起来并不复杂。

我相信这就是你想要的：

　　

（为了简单起见，我在示例中使用了）

var list=[“The”，“well known”，“means”，“to give”]//词表
变量输出=$（“#输出”），
html=output.html（）；
对于（变量i=0；ispan”）。每个函数（i）{//为每个函数创建索引
var x=$（this）.offset（）.left，//获取x
y=$（this.offset（）.top，//获取y
宽度=+$（this）.width（），//获取宽度
$select=$（“”）。addClass（“select”）；
$select.css({
顶部：y+20，
左:x,，
宽度：宽度
})
.html（String.fromCharCode（65+i））//设置索引（A、B、C…）
.appendTo（“body”）；//将其附加到容器中
});

（该示例将在调整窗口大小时自动重新计算位置。）

---

这是实现它的一种方法，还有很多其他方法。就我个人而言，我更喜欢这一点，因为理解起来并不复杂。

你做了什么？嗨，德里克，我被困在关于在下划线文本下定位选项的部分。你做了什么？嗨，德里克，我被困在关于在下划线文本下定位选项的部分。谢谢你，德里克。那很好。顺便说一句，我能问你美元（'p>span'）和美元（'p span'）之间有什么区别吗？“>”是什么意思？Thanks@PaulHoang-有用吗？是的，谢谢Derek。我已经在我的案例中尝试过了，而且效果很好。唯一的小问题是，由于选项的位置是绝对的，它可能与下面的文本冲突（例如，当句子很长，因此跨越两行时，选项A可能覆盖下一行的文本）。有没有办法强迫下一行稍微后退一点？@PaulHoang-在我的例子中，我增加了

行高

以增加行间距。我想知道是否有更好的解决方案（因为行高将应用于所有行）。但它是有效的。谢谢德里克，谢谢你，德里克。那很好。顺便说一句，我能问你美元（'p>span'）和美元（'p span'）之间有什么区别吗？“>”是什么意思？Thanks@PaulHoang-有用吗？是的，谢谢Derek。我已经在我的案例中尝试过了，而且效果很好。唯一的小问题是，由于选项的位置是绝对的，它可能与下面的文本冲突（例如，当句子很长，因此跨越两行时，选项A可能覆盖下一行的文本）。有没有办法强迫下一行稍微后退一点？@PaulHoang-在我的例子中，我增加了

行高

以增加行间距。我想知道是否有更好的解决方案（因为行高将应用于所有行）。但它是有效的。谢谢你，德里克。

var list = ["The", "well known", "meanings", "to give"];    //word list
var output = $("#output"),
    html = output.html();

for(var i = 0; i < list.length; i++) {
    //Wrap each keyword with <span>
    html = html.replace(new RegExp("(" + list[i] + ")", "i"), "<span>$1</span>");
}

output.html(html);

$("p>span").each(function (i) {              //Create the index for each one
    var x = $(this).offset().left,                  //Get the x
        y = $(this).offset().top,                   //Get the y
        width = +$(this).width(),                   //Get the width
        $select = $("<div>").addClass("select");

    $select.css({
        top: y + 20,
        left: x,
        width: width
    })
        .html(String.fromCharCode(65 + i))          //Set the index (A, B, C...)
        .appendTo("body");                          //Append it to the container
});