Text ändern, input Werte dynamisch

Meine Frage wäre ganz einfach für Euch, aber es ist schwer für mich...

Ich habe ein Textfeld und möchte ich ändern Sie dessen Wert zwischen einmal <label id="some_id"> geklickt wird. Bis das, was ich beschrieben habe nun, ich kann es mir mit jQuery, aber hier kommt der komplexe Teil (für mich offensichtlich):

Habe ich zwei Werte möchte ich für das Textfeld, und einmal, dass <label> geklickt wird, wechselt der Wert, der nicht gezeigt, aber sobald wir darauf klicken wieder, es geht zurück auf den ursprünglichen text das text-Feld enthalten.

Habe ich, um meine jQuery/JS-internen, weil ich die gewünschten Werte aus der Datenbank und ich möchte nicht, dass meine .js Dateien .php.

Dies ist, was ich habe:

<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />

Tut es der erste Teil, den ich brauche, und ändern Sie den Wert des Feldes der neue Wert, aber sobald diese Taste wird wieder geklickt, ich will den original-text.

Danke.

  • vor dem überschreiben Sie den Wert mit der Beschriftung geklickt wurde, speichern Sie das original in eine js-variable und benutzen Sie einfach den ursprünglichen Wert wieder, wenn auf Sie geklickt zweiten mal
InformationsquelleAutor Dugi | 2012-12-29
  1. 4

    Können Sie vergleichen mit dem aktuellen Wert für die zur Verfügung stehenden Möglichkeiten.

    <label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">​
    var possibilities = ["foo", "bar"];

$('#toggle').click(function(){
    var old_val = $("#stuff").val(), new_val;
    if (old_val == possibilities[0])
        new_val = possibilities[1];
    else
        new_val = possibilities[0];

    $("#stuff").val(new_val);

});​

    demo

    InformationsquelleAutor Brigand
  2. 7

    Ersten, nicht mit inline-JavaScript.

    Können Sie eine Kombination von .toggle() und data-* Attribute für diese. Zum Beispiel mit einer data-toggle Attribut für den Wert, den Sie möchten, um wechseln mit.

    <label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>​

    $("label[for][data-toggle]").each(function() {
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue;
    $this.toggle(function() {
        originalValue = $for.val();
        $for.val($this.data("toggle"));
    }, function() {
        $for.val(originalValue);
    });
});​

    Sehen Sie hier.

    UPDATE #1

    Ich fügte hinzu, die Nutzung von for Attribut <label>.

    UPDATE #2

    Wenn Sie nicht möchten, zu verwenden .toggle() aufgrund der deprecation notice.

    $("label[for][data-toggle]").each(function() {
    /* cache */
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue = $for.val();
    /* state variable */
    var which = 0;
    $this.click(function() {
        $for.val(which ? originalValue : $this.data("toggle"));
        which = 1 - which;
    });
});​

    die nicht-.toggle() alternative hier.

    • toggle Methode ist veraltet.
    • da?
    • Seit jQuery 1.7
    • Ich kann nicht sehen, die deprecation Hinweis überall. Referenz?
    • Sie finden es hier api.jquery.com/category/deprecated
    • Ich bringe eine alternative

    InformationsquelleAutor Alexander
  3. 4

    Dies zu tun, auf die erste Schaltfläche klicken, müssen Sie zum speichern der aktuelle Wert von input in einen Variablen und dann auf 2 klicken, können Sie die variable zuweisen input-Wert. Wenn Sie donot wollen, haben js-Datei, können Sie einfach <script></script> - tags zu schreiben, die jquery.

        `<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">

    <script>
        var currentValue="";
   function replaceText(newval){
       currentValue= $("#html").val();
        if(currentValue!=newval)
        $("#html").val(newval);
   $("#label").attr("onclick","replaceText('"+currentValue+"')");//Here we assigned the other value to label onclick function so that it will keep on toggling the content.
   }
    </script>`

    DEMO HIER

    • Ich habe eine sehr einfache Funktion, diese soll zum Umschalten der Werte jedesmal, wenn darauf geklickt wird 🙂 cheers!!
    InformationsquelleAutor Ankush
  4. 1

    Können Sie speichern die Werte in JavaScript-Variablen und jQuery - click Methode statt onclick Attribut.

    var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
    up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";

$('label[for=html]').click(function() {
    $('#html').val(function(i, currentValue) {
        return currentValue === def ? up : def;
    });
});
    InformationsquelleAutor undefined
Schreibe einen Kommentar