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.Followingソリューションを使用して完了しましたが、あなたのニーズを達成するのに役立ちます.

<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

これには 2 つの方法があります。

  1. 必要なクラスを選択してから、表示するテキストを変更できremoveClass()ますaddClass()
  2. で囲み<p>、を使ってまとめて<div>上書きすることができます。<p>innerHTML<div>
于 2013-11-06T10:53:23.807 に答える