如何更改每个段落周围的边框<p>部分从下拉列表中动态显示

How to change border around each paragraph <p> section dynamically from dropdown list?

本文关键字：gt 动态显示 下拉列表 lt 何更改 段落周 边框      更新时间：2023-09-26

下面的fiddle可以将文本粘贴到<textarea>中，并在单击按钮时转换为段落。

是否可以在fiddle中创建一个下拉列表<select>，其中可以在每个段落部分周围创建一个边框，并根据用户的选择从下拉列表动态更新到其他边框？

如果能提供更新的小提琴，我将不胜感激，因为我对编码还是个新手。

谢谢！

Fiddle

HTML:

<div>
<div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;">xzxz</div>
<textarea style="widht:95%;"></textarea>
<button>Go</button>

JavaScript:

    $(function () {
    $('button').on('click', function () {
        var theText = $('textarea').val();
        var i = 200;
        while (theText.length > 200) {
            console.log('looping');
            while (theText.charAt(i) !== '.') {
                i++;   
            }
            console.log(i);
            $("#text_land").append("<p>" + theText.substring(0, i+1) + "</p>");
            theText = theText.substring(i+1);
            i = 200;
        }
        $('#text_land').append("<p>" + theText + "</p>");
    });
});


$(function () {
    $('button').on('click', function () {
        var theText = $('textarea').val();
        var i = 200;
        while (theText.length > 200) {
            console.log('looping');
            while (theText.charAt(i) !== '.') {
                i++;   
            }
            
            console.log(i);
            $("#text_land").append("<p target='tobebordered'>" + theText.substring(0, i+1) + "</p>");
            theText = theText.substring(i+1);
            i = 200;
        }
        
        $('#text_land').append("<p target='tobebordered'>" + theText + "</p>");
    })
    
    $('#borders').on('change', function () {
        var border = $(this).val();
        $('[target="tobebordered"]').each(function(idx, obj) {
            $(obj).removeClass('dotted dashed');
            $(obj).addClass(border);
        });
    });
});
.dashed {
   border: 1px dashed #000
}
.dotted {
   border: 1px dotted #000
}
<div>
    <div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;">xzxz</div>
    <textarea style="widht:95%;"></textarea><br>
    <button>Go</button><br>
    <select id="borders">
        <option value='dashed'>Dashed</option>
        <option value='dotted'>Dotted</option>
    </select>
</div>

希望这能有所帮助

相关文章：