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

一个可能的原因可能是您正在创建多个具有相同 ID 的<input>复选框和<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 回答