0

私の質問は皆さんにとっては非常に簡単かもしれませんが、私にとっては難しいです...

<label id="some_id">テキストフィールドがあり、クリックされるたびにその値を変更したい。これまで説明してきたことまで、jQueryを使用して自分でそれを行うことができますが、ここに複雑な部分があります（私にとっては明らかに）：

そのテキストフィールドに必要な値が2つあり、それをクリックすると、表示されていない値に切り替わりますが、もう一度<label>クリックすると、テキストフィールドに含まれていた元のテキストに戻ります。

.jsデータベースから目的の値を取得し、ファイルを作成したくないため、jQuery/JSを内部に保持する必要があります.php。

これは私が得たものです：

<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 />

フィールドの値を新しい値に変更して、必要な最初の部分を実行しますが、そのボタンをもう一度クリックすると、元のテキストが必要になります。

ありがとうございました。

4

4 に答える 4

7

まず、インラインJavaScriptを使用しないでください。

.toggle()これには、とdata-*属性の組み合わせを使用できます。たとえば、data-toggle切り替えたい値の属性を使用します。

<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);
    });
});​

こちらをご覧ください。

更新＃1

forの属性の使い方を追加しまし<label>た。

更新＃2

.toggle()非推奨の通知のために使用したくない場合。

$("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;
    });
});​

ここで非.toggle()代替案を参照してください。

于 2012-12-29T13:53:29.467 に答える
4

これを行うには、最初のボタンクリックで入力の現在の値を変数に保存する必要があり、2回目のクリックでその変数を入力値に割り当てることができます。jsファイルが必要ない場合は、<script></script>タグを使用して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>`

デモはこちら

于 2012-12-29T13:45:44.293 に答える
4

現在の値を利用可能な可能性と比較できます。

<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);

});​

デモ

于 2012-12-29T13:59:53.833 に答える
1

値をJavaScript変数に格納し、属性clickの代わりにjQueryメソッドを使用できます。onclick

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;
    });
});
于 2012-12-29T13:47:15.403 に答える