Question

附带的以下小提琴允许将文本粘贴到<textarea>并在按钮点击时转换为段落。

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

如果可以提供更新的小提琴，我将非常感激，因为我还不熟悉编码。

谢谢！

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

});

Answer 1

$(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>

希望这有帮助！

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

1 个答案: