3

我在网上搜索了用 javascript 更改 html 代码，但我一直在寻找的只是 .innerHTML 之类的东西，然后输出文本。我想知道我们是否可以仅使用 javascript/jquery/json 更改后端的 html 代码

例如，我有一个带有红色输出文本的输入文本区域.class1和一个提交按钮，然后在文本区域中我键入 class2 或 2，然后在提交后.class1更改为.class2。

这里只是一个带有一些简单代码的示例。

//so I have two classes here just for example
.class1
{
    color:red;
}

.class2
{
    color:blue;
}

//form with action and method and a text area input and a submit button
<form action=" " method="post">
<label>Which class</label><input type="text">
<input type="submit">

//let's say this is the original out put (.class1 with text Using Class 1 in blue)
<p class="class1"> Using Class 1</p>

所以现在让我们说在我输入class2的文本区域然后点击提交

<p class="class1"> Using Class 1</p> 更改为 <p class="class2"> Using Class 2</p>

或者即使没有 class3 但如果在文本区域中我输入 class3 或乱码，输出将类似于 <p class="class3 or gibberish"> Using class3 or gibberish</p>

实际上，我对如何改变这<p class="class3 or gibberish">一点比Using class 3部分更感兴趣。

希望我的解释不是太胡说八道。

先谢谢各位了~

4

4 回答 4

4

如果我了解您要做什么，则需要使用removeAttr('class')摆脱任何现有样式，然后addClass()穿上新样式。尝试这个：

<label>Which class</label>
<input type="text" id="class-name" />
<input type="button" id="update" value="Update" />
<p class="class1">Using Class 1</p>

$('#update').click(function () {
    var newClass = $('#class-name').val();
    $('p')
        .removeAttr('class')
        .addClass(newClass)
        .text('Using ' + newClass);
});

示例小提琴

于 2013-11-06T10:51:50.550 回答
1

我已经使用 Jquery。以下解决方案将有助于满足您的需求。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <title>Untitled Page</title>
    <style type="text/css">
        .class1
        {
            color:red;
        }

        .class2
        {
            color:green;
        }
</style>
<script type="text/javascript">
    function fnSubmit() {
        $("#p1").replaceWith("<p class='" + $("#txtInput").val() + "' id ='p1' >using" + $("#txtInput").val() + " </p>");
        return false;
    }    
</script>
</head>
<body>
    <form action=" " id="frm">
    <label>
        Which class</label><input type="text" id="txtInput">
    <input type="submit" id="btnSubmit" onclick=" return fnSubmit();">
    <p class="class1" id="p1">
        Using Class 1</p>
</body>
</html>
于 2013-11-06T11:26:38.017 回答
0

您可以使用.addClass()轻松完成此操作

尝试这个

$('#update').click(function () {
    $('p').removeclass('old class name').addClass('new class-name')
});
于 2013-11-06T10:52:17.223 回答
0

有两种方法可以解决这个问题：

  1. 你可以removeClass()然后addClass()你需要的类然后改变你想要显示的文本
  2. 您可以用<p>a包围<div>并<p>使用innerHTML.<div>
于 2013-11-06T10:53:23.807 回答