javascript - テキストに下線を引くラジオボタンのスタイリング

Question

だから私はテキストを持っています：「The Oxford ....real examples」と下線を引く必要があるフレーズと、すぐ下にラジオオプションがあるフレーズ（写真にはラジオボタンはありませんが、ラジオボタンも必要です）ユーザーが選択できるようにします)。

cssとjavascriptでこれを達成するにはどうすればよいですか?

助けてくれてありがとう。

Answer 1

これがあなたが望むものだと思います：

　　http://jsfiddle.net/DerekL/NRpcn/

(簡単にするために、この例ではjQueryを使用しています)

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

(この例では、ウィンドウのサイズを変更すると、位置が自動的に再計算されます。)

これはそれを実現する 1 つの方法であり、他にも多くの方法があります。理解するのがそれほど複雑ではないので、個人的にはこれが好きです。