0

基本的に私がやろうとしているのは、クラスのチェックボックスをクリックするとドロップダウンが表示され、そこから名前を選択できるようになることです。ここに私が使用しているhtmlとjクエリコードがあります

`<tbody>
      @foreach (var a in DropDownList.GetCourses)
               {
                                    <tr>
                                    <td>
                                        <input id="coursecheck" type="checkbox" name="courseId" value="@a.Id"/></td>
                                    <td>@a.CourseName</td>

                                   <td class="hidden" id="teachlist" data-fts-conectionid="@a.Id">@Html.DropDownList("instructorId", DropDownList.GetInstructors)</td>
                             </tr>
                                }<tr>


                            </tr>
                        </tbody>

`そして、ここに私が使用しようとしているjqueryがあります。サイトを見回し、検索してさまざまなことを試してみましたが、うまく機能しません。

`//$('main').on('change', '#coursecheck', function () {
//    var $checkbox = $(this);
//    var $checkboxid = $checkbox.attr("value");
//    var $dropdowndata = $('#teachlist').attr('data-fts-connectionid');
//    var $connect = function() {
//        if ($checkboxid == $dropdowndata && $('#teachlist').hasClass("hidden")) {
//            $('#teachlist').removeClass("hidden");
//        } else if ($checkboxid == $dropdowndata && !$('#teachlist').hasClass("hidden"))
//            $('#teachlist').addClass("hidden");


//    };
//});
//$('#main').on('click', '#coursepopover', function() {
//    if ($('#coursecheck').is('checked')) {
//        $('#teachlist').removeClass("hidden");
//    } else {
//        $('#teachlist').addClass("hidden");
//    }
//});`

私が見逃しているのは単純なことだとわかっていますが、別の目のペアでそれを見ることができないかもしれませんが、それを理解したら、コード修正を必ず投稿してください。

4

1 に答える 1

0

<input>考えられる理由の 1 つは、同じ ID を持つ複数のチェックボックスと<td>要素を作成している可能性があるため$('#teachlist')、ID セレクターなどを実行すると、問題が発生する可能性があります。

<input>次のような一意の IDをそれぞれに割り当てる価値があるかもしれません。

id='@("coursecheck_" + a.Id.ToString())'

そして、それぞれ<td>に次のような一意の ID があります。

id='@("teachlist_" + a.Id.ToString())'

(私の構文は少しずれているかもしれません - ごめんなさい)

私はあなたがこの男についてどのように考えているかが好きです:

$('#courseinstructors2').on('change', '#coursecheck'....

<input>しかし、たとえば、それぞれに次のようなクラスを割り当てた方が良いと思います<input class='courseCheckBox'（複数の要素に同じクラスがあることは問題ありません/予想されるため）、セレクターを次のように変更します。

$('.courseCheckBox').on('change', <function>....

したがって、 $('.courseCheckBox') はすべてのチェック ボックスに一致し、それらのchangeイベントを関数にバインドします。

これにより、次のようになる場合がありますon()。

$('.courseCheckBox').on('change', function () {
    var clickedCheckBox = $(this);
    var clickedCheckBoxId = $(this).attr('id'); //Grab the Id, like coursecheck_<number>

    //Can do this because we know the Id formats are coursecheck_<number> and teachlist_<number>
    var tdToUnhideId = clickedCheckBoxId.replace("coursecheck", "teachlist");
    var tdToUnhideSelector = "#" + toToUnhideId; //Create the Id selector from the Id

    if ($(this).is(':checked') && $(tdToUnhideSelector).hasClass("hidden")) {
         //Show it
         $(tdToUnhideSelector).removeClass("hidden");
    } else {
        //Hide it
        $(tdToUnhideSelector).addClass("hidden");
    }
});

チェックボックスがオンになっ$(this).is(':checked')て<td>いて、隠しクラスがある場合はそれを再表示し、そうでない場合は非表示にします。

それがあなたの問題を解決するかどうかはわかりませんが、うまくいけば、開始するためのいくつかのものがシードされます. 役に立たなかった場合は、事前にお詫び申し上げます。

于 2013-03-30T01:32:54.577 に答える