1

特定のラジオボタンがクリックされたときにdivを開く必要があるかどうかを判断するために、jqueryを使用してajaxリクエストを作成しています。開いたdivを、選択したラジオボタンの直下に表示したい。私はうまくいくと思われる以下のものを持っています:

<script language="javascript">
$(document).ready(function(){
    $(".option_select").click(function() {
        $(this).next().after($('#show_pop'));
        $.ajax({
          dataType: 'jsonp',
          url: "/jrequest",
          data: {
            Action: "Do", 
            Option: po,               
          },              
          success: function (response) {                    
            if (response['SomeResponse']) {
                $('#show_pop').slideDown("slow");
            } else {
                $('#show_pop').hide();
            }                       
          },    
          error: function (xmlhttp) {
                console.log(xmlhttp);                   
          }
        });                     
    } 
    }); 
});
</script>

<input type="radio" name="Option1" class="option_select" value="Option1" /> Option 1
<input type="radio" name="Option2" class="option_select" value="Option2" /> Option 2
<input type="radio" name="Option3" class="option_select" value="Option3" /> Option 3

私が理解できないのは、ajaxの「成功」の一部として「後」を実行できないのはなぜですか? たとえば、行を移動すると

$(this).next().after($('#show_pop'));

ここまで:

....
  success: function (response) {                    
    if (response['SomeResponse']) {
        $(this).next().after($('#show_pop')); // This line does not seem to work here
        $('#show_pop').slideDown("slow");
    } else {
        $('#show_pop').hide();
    }                       
 },
....

次に、各オプションの下ではなく、フォームの上に div が開きます。誰かが理由を説明できますか？

ティア！

4

1 に答える 1

4

this成功のコールバックでは、jQuery オブジェクトではなく、呼び出しで使用される ajax 設定です ($.ajaxSettingsこの への呼び出しとマージされます$.ajax)。

さまざまなソリューションがあります。

再割り当てthis

他の言語と同様に、JS ではthis変数を再割り当てできます。これは、スコープに応じて、それ自体が特別な意味を持ちます。他の変数名にはそのような制限がなく、下位のスコープで自由に使用できます。

$(".option_select").click(function() {
    var $this = $(this);
    /* snip */
        success: function () {
            $this.next();
        }

Function.bindまたは_$.proxy

Function.bind後で呼び出される関数のコンテキストを設定できます。.callこれはandに似て.applyいますが、関数をすぐには呼び出しません。によって設定されたコンテキストは/によって設定されたコンテキスト.bind よりも優先される.call.applyため、これは ajax コールバックで使用できます (.call後で使用すると想定していますが、これは確認していません)。

jQuery には$.proxy、同じことを行うメソッドがありますが、使用できないブラウザーと互換性がFunction.bindあります。動作が少し異なり、メソッドではなく jQuery メソッドですがFunction、この場合はあまり問題になりません。

success: function () { /* your code */ }.bind(this)
success: $.proxy(function () { /* your code */ }, this)

どちらのメソッドも関数を返します。

個人的には、これが最も正しい解決策だと思いますが、それらはすべて本質的に同じように機能します。

使用する$.ajax context

これは一般に で設定できますが$.ajaxSettings、この場合はおそらく意味がありません。この設定は、 のすべてのコールバックのコンテキストを設定します$.ajax。

$.ajax({
    context: this,

this上記の例での の使用。

$.ajax({宣言は独自のスコープを作成しないことに注意してください。したがって、次のようにしても安全です。

$(".option_select").on("click", function () {
    $.ajax({success: function () {}.bind(this)});
});

上記thisは、jQuery が.clickコールバックのコンテキストとして設定する DOM 要素のままです。作成される他の唯一のスコープは by ですがfunction () {}、それ以外で使用thisします。

詳細については、$.ajaxドキュメントを参照してください

于 2013-06-21T00:29:40.893 に答える