Question

所以我想做的是：

- ＆GT;从textarea获取内容（由用户输入）（输入var）。

- ＆GT;将每一行拆分为\ n并将它们存储在变量（var行）中。

- ＆GT;使用for循环迭代所有行并将类（.modify）添加到不包含字符[\u3400-\u9FBF]的行。其他线路保持不变。

- ＆GT;将所有行存储在一个新容器中（div class =“new_text）并显示它。

这是我到目前为止所做的：

<!--DOCTYPE html-->
<html>
    <head>
        <style>
            textarea { 
              width: 650px; 
              min-width:650px; 
              max-width:650px; 
              height:650px; 
              min-height:650px;  
              max-height:650px;
            }
            .modify {
              color : red;
            }
        </style>
        <script>
            $(document).ready(function() { 
                $("#test").click(function(){
                    var i; 
                    var entered = $('#textInput').val();
                    var lines = entered.split('\n');
                    res = "";
                    for(i=0;i<lines.length;i++){
                        if (lines[i].match(/[\u3400-\u9FBF]/)) {
                            res = lines[i];
                            $(".new_text").append(res);
                        } else {
                            res = lines[i];
                            $(".new_text").append(res).addClass("modify");
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <div class="container">
            <form role="form">
                <div class="userInput">
                    <label for="textInput">Input Here:</label>
                    <textarea class="form-control" rows="40" id="textInput"></textarea>
                </div>
                <button type="button" class="btn btn-Warning" id="test">Test</button>
            </form>
            <div class="new_text"></div>
        </div>
    </body>
</html>

然而，这并没有改变原来的textarea输入，任何想法有什么不对？或者这不是一种可以接受的方式来完成我想要做的事情？提前谢谢！

Answer 1

对于不包含所需条件的项目，您需要将文本包装在元素中以便应用css类。

for(i=0;i<lines.length;i++){
            if (lines[i].match(/[\u3400-\u9FBF]/))
            {
              res = lines[i];
              $(".new_text").append(res);
            }
            else
            {
                res = lines[i];
                $('<p/>',{
                  text: res,
                  'class': 'modify'
              }).appendTo('.new_text');             
            }
          }

以下是工作示例：https://jsfiddle.net/DinoMyte/6x80vabm/10/

Answer 2

您所有文字变红的问题是因为您将“修改”类添加到“.new_text”而不是新元素。

您需要使用有效的HTML调用append。一行文字是不够的。试试这个：

$(".new_text").append( $("<p>" + res + "</p>").addClass("modify") );

Answer 3

同意第一个答案。您只能将类添加到正确的HTML中。

此外，在修改选择器内部，您有color = red;。那个CSS无效。它应该是color: red;。

我注意到的另一个问题是没有id="test"的按钮，因此实际上没有任何内容会触发测试点击处理程序。

JQuery：如何在textarea中的某些行中添加一个类并显示修改后的textarea？

3 个答案: