0

この質問を投稿しようとしたとき、私は簡単な解決策を思いついたのです。

問題は、ユーザーが選択した言語に応じて、複数の言語で確認メッセージが必要になることでした。私は常にHTMLから特定の情報を取得するので、そのようにしようとしていましたが、この点で行き詰まりました。

正しいメッセージを含むtitle属性を使用した、ユーザー向けの簡単な削除ボタンを次に示します（この例では、テキストのみです。コードでは、正しい翻訳を含む変数です）。

<input type="submit" name="delete" value="Delete me" title="Are you sure?" />

次に、jQueryを使用してその行を取得し、次のように確認ボックスに表示します。

$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('title'));
});

ただし、これは、入力要素にマウスオーバーで表示されるタイトルが含まれていることを意味します。これは私が好きではありません。確認ボックスをキャンセルしてボタンをもう一度クリックすると空のメッセージが表示されるため、これを削除することは実際にはオプションではありませんでした。

とにかく、このアプローチ全体は、単純なテキスト行を取得するために私にはうまくいきませんでした。次に、$。get（）について考えました。他のシナリオでは常に使用しているため、なぜ以前にそれを考えなかったのかわかりません。

したがって、これは、HTMLを処理したり、タイトルやその他の属性を読み取ったりすることなく、正しいテキストをJavaScriptに直接取り込むための一般的なソリューションとしてはかなり良いと思います。


$("input[type='submit'][name='delete']").click(function() {
    $.get('something.php', {
            action: 'getText',
            variable: 'confirm_delete'
        }, function(text) {
            return confirm(text); // doesn't return instantly...
      });
    return false; // breaks the form action...
});


更新
わかりました。これをjQueryスクリプトの最後の部分に関する質問に戻します。$.get()情報を取得するのに少し時間がかかるようです。おそらくそれほど時間はありませんが、それは少しの時間であり、その間に、フォームはすでに送信されています。一番return false下のはこれを部分的に解決します。これは、最初に返されるものだからです。ただし、次の場合、デフォルトのボタンアクションがすでに停止しているreturn confirmため、[OK]をクリックしてもほとんど何も起こりません。return false

だから..私の質問は：を使用してテキストを取得する方法はあります$.get()か、そしてフォームの送信がロードされるまで待機するような方法はありreturn confirmますか？

4

2 に答える 2

1

私が提案するのは、最初はもう少し時間がかかりますが、長期的にはあなたに利益をもたらすと私が信じているものです.

多言語対応も設定されているプロジェクトがあるため、ページで最初に行うことの 1 つは、そのページに必要なテキストを読み込むことです。

私は単純な XML ファイルにテキストを保存し (今はそれほど多くのテキストを持っていませんが、明らかにデータベースや txt ファイルなど、必要に応じてそれを行うことができます)、それを次のようにロードします$.ajax( asyncset呼び出しを試みる前に、テキストがすべて読み込まれてfalseいることをすぐに確認できるようにします)。これをオブジェクトとして設定しlanguage、言語コードをパラメーターとして受け取ります。そのため、ページの先頭で呼び出すことlanguage = new language('en-us');で、必要なときにいつでも言語に依存しないテキストを簡単に取得できます。たとえば、これをプロジェクトに適用すると、次のように簡単になります。

$("input[type='submit'][name='delete']").click(function() {
  return confirm(language.text('are_you_sure'));
});

編集: PHP と jQuery から同じ XML ファイルを読み取ることができるため、これは PHP でもうまく機能し、すべてのテキストを 1 か所に集中させることができます。

このアプローチが気に入らない場合は、あなたが試してきたものと同様の他の 2 つの HTML アプローチを指摘したいと思います。1 つ目は、単純にinput[type=hidden]フィールドを使用することです。このようにすると、マウスオーバー効果がなくなります。次に、次のようなことができます。

<input type="hidden" name="confirm_text" value="Are you sure?" />
$("input[type='submit'][name='delete']").click(function() {
  return confirm($('input[name=confirm_text]').val());
});

しかし、正直なところ、これはかなり大雑把で、あまりセマンティックではないと思います。もう 1 つのオプションはdata-属性を使用することですが、これは HTML5 を使用している場合にのみ利用できます (これは、doctype を変更するだけで簡単に実行できます)。これは次のように機能します。

<input type="submit" name="delete" value="Delete me" data-confirmtext="Are you sure?" />
$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('data-confirmtext'));
});

これらすべてのオプションの中で、ベスト プラクティスとセマンティクスに関心があるため、最初のオプションが最適だと思います。無関係な HTML 属性や隠しフィールドにランダムなデータを保存しようとすることは、あまりセマンティックに思えません。お役に立てれば！

于 2009-08-18T04:10:46.057 に答える
0

あなたのソリューションでは、もう少しチューニングを使用できると思います。このようにすると、実際には必要のない多くの ajax リクエストが作成されます (可能性があります)。

rel 属性を使用できます。

<input type="submit" name="delete" value="Delete me" rel="Are you sure?" />

その後

$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('rel'));
});

さらに良いことに、 のような rel 属性にキーを格納できますrel='confirmation.delete'。そして、次のような通訳を用意します。

var stringLibrary = {
    prompt: {
        foo: "Enter your foo:",
        bar: "How many bars?"
    },
    confirmation: {
        delete: "Are you sure you want to delete that?"
    },
    error: {
        codes: {
            324: "Oh no!",
            789: "Oh yes!"
        }
    }
};

var trans = function(key) {
    var result = stringLibrary;
    key = key.split(".");

    for ( var i in key ) {
        if ( result[ key[i] ] ) {
            result = result[ key[i] ];
        } else {
            return null;
        }
    }

    return result;
}

使用法：

console.log(trans("prompt.foo"));
console.log(trans("confirmation.delete"));
console.log(trans("error.codes.324"));
console.log(trans("i.dont.exist"));

$("input[type='submit'][name='delete']").click(function() {
  return confirm( trans($(this).attr('rel')) );
});
于 2009-08-06T21:44:04.257 に答える