0

このページには 3 つの個人検索が含まれています。基本的にはテキストボックスとボタンです。ボタンをクリックすると、関連するテキスト ボックス内のテキストが取得され、関連する結果にリスト データが入力されます。

    <div class="personcontainer">
        <div class="peoplesearchdiv" >

        <input type="text" class="searchpersontxtbox" />
        <input type="button" value="Find" class="findpersonbtn" />
        <div class="peopleresultsdiv"></div>
    </div>
    <input type="hidden" class="personguid" />

<div class="personcontainer">
        <div class="peoplesearchdiv" >

        <input type="text" class="searchpersontxtbox" />
        <input type="button" value="Find" class="findpersonbtn" />
        <div class="peopleresultsdiv"></div>
    </div>
    <input type="hidden" class="personguid" />

<div class="personcontainer">
        <div class="peoplesearchdiv" >

        <input type="text" class="searchpersontxtbox" />
        <input type="button" value="Find" class="findpersonbtn" />
        <div class="peopleresultsdiv"></div>
    </div>
    <input type="hidden" class="personguid" />

さて、これを機能させるための jquery は次のとおりです。

$(document).ready(function () {

    $('.findpersonbtn').click(function () {

    var query = $(this).closest('.personcontainer').find('.searchpersontxtbox').val();

    $.get('/People/GetPeople/', { 'query': query }, function (data) {         

        $(this).closest('.peoplesearchdiv').find('.peopleresultsdiv').html(data);

    });

});

GetPeople から返されるのは、基本的なリスト データです。

<ul>
  <li>Cat</li>
  <li>Dog</li>
</ul>

だから私が望んでいたのは、同じpersonscontainer内のpeopleresultsdivにhtmlを入力するためのリストデータでした。

しかし、うまくいきません。

GetPeople メソッドであることを排除するために、jquery を次のように変更しました。

$(document).ready(function () {

        $('.findpersonbtn').click(function () {

        var query = $(this).closest('.personcontainer').find('.searchpersontxtbox').val();

        $.get('/People/GetPeople/', { 'query': query }, function (data) {         

            $(this).closest('.peoplesearchdiv').find('.peopleresultsdiv').html("<ul><li>Cat</li><li>Dog</li></ul>");

        });

    });

それでもうまくいきません。

だから私は試しました：

$(document).ready(function () {
    $('.findpersonbtn').click(function () {

        var query = $(this).closest('.personcontainer').find('.searchpersontxtbox').val();

        $(this).closest('.peoplesearchdiv').find('.peopleresultsdiv').html("<ul><li>Cat</li><li>Dog</li></ul>");

        $.get('/People/GetPeople/', { 'query': query }, function (data) {


        });

    });

ふむふむ。これでリストが表示されます。メソッドからデータを取り込むことができないため、明らかに私が望むものではありません。

だから、最も近い検索は get 内で機能しないように見えますか?

なぜ修正するのか知っている人はいますか？

4

1 に答える 1

2

$.get 内で $(this) を使用しても peopleresultsdiv は返されません。

したがって、必要な div を $.get の外で取得して変数に入れ、それを $.get 内で使用できます。

于 2012-07-04T03:35:46.817 に答える