/ / JQuery: In & aus Textarea-Element konvertieren - Javascript, JQuery, HTML, CSS

JQuery: Konvertieren in und aus Textarea-Element - Javascript, Jquery, HTML, CSS

Ich bin neu in JQuery und ich versuche einige Dinge zu tun, die ich nicht sicher bin, ob ich sie in JQuery tun kann.

  • Kann ich einen HTML-Elementtyp mithilfe einer JQuery-Funktion (oder sogar einer systemeigenen Javascript-Funktion) abrufen? Wenn ja, wie heißt die Funktion?
  • Ich möchte eine HTML-Elementklasse aktualisieren / festlegenAttribut. Würden Sie vorschlagen, dass ich dafür nur einfaches altes setAttribute () verwende, oder sollte ich eine JQuery-Funktion verwenden? Wenn ich eine JQuery-Funktion verwenden soll, wie heißt die Funktion?
  • Gibt es eine Javascript-Funktion, die eine HTML-Elementklasse zurückgibt? Ist es this.getAttribute ("Klasse")?

Erfahrenere JQuery-Programmierer: Wie würden Sie diesen JQuery-HTML-Code verbessern, der versucht, Elemente wieder in Textbereiche zu ändern? (Einige Funktionen fehlen derzeit):

<html>
<head>

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
<!--
var STATE = 0;

function Toggle()
{
if (STATE==1) { convertToUpdatable(); STATE = 0; }
else          { convertToStatic();    STATE = 1; }
}

function convertToUpdatable()
{
// Post: Convert all HTML elements (with the class "updatable") to textarea HTML elements
//       and store their HTML element type in the class attribute
// EG: Before: <p class="updatable"/> Hello this is some text 1 </p>
//     After : <textarea class="updatable p"/> Hello this is some text 1 </textarea>

$(".updatable").each(function()
{
$(this).replaceWith("<textarea>"+$(this).text() +"</textarea>");
// TODO store this elements type in class attribute
// The below is guessing that there are jquery functions getType()
$(this).setAttribute( "class", $(this).getAttribute("class") + $(this).getType() );
});
}

function convertToStatic()
{
// Post: Find all HTML elements (with the class "updatable"), check to see if they are part of another class aswell
//       (which will be their original HTML element type) & convert the element back to that original HTML element type

$(".updatable").each(function()
{
// This uses javascript functions: how can I write this in JQuery
var type = this.getAttribute("class").replace("updatable","").replace(" ", "");

if (type == "") { alert("Updatable element had no type defined in class attribute"); return; }

$(this).replaceWith( type +$(this).text() + type );
$(this).setAttribute( "class", "updatable" );
});
}

-->
</script>
</head>
<body>

<p class="updatable"/> Hello this is some text 1 </p>
<b class="updatable"/> Hello this is some text 2 </b>
<i class="updatable"/> Hello this is some text 3 </i>

<input id="MyButton" type="button" value="Click me!" onclick="Toggle();" />

</body>
</html>

Antworten:

0 für die Antwort № 1

Hier sind Links für Ihre ersten drei Fragen:

  1. Wie kann ich den Elementtyp eines übereinstimmenden Elements in jQuery ermitteln?
  2. http://api.jquery.com/addClass/
  3. http://api.jquery.com/hasClass/

0 für die Antwort № 2

Javascript:

your_element.className = "some_class";
your_element.nodeName;