Question

将.NET MVC与包含14列表的视图一起使用。我允许用户打开模式并选择/取消选择复选框以隐藏和取消隐藏这些列。但是代码很庞大，效率很低。但是，它确实有效，我只是在寻找如何使它变得更好的答案。

我做的方法是这样标记TH

  <th id="col1" class="toggleMe1">
         UW
    </th>
    <th class="toggleMe2">
       @Html.DisplayNameFor(model => model.Client)
     </th>

TH和TD都如此

<td class="toggleMe1">
     @Html.DisplayFor(modelItem => item.NameOf)
</td>
<td class="toggleMe2">
     @Html.DisplayFor(modelItem => item.Client)
 </td>

这是我使用的Jquery。为了使我分别隔离这些列而不关闭/打开其他列，我必须以这种方式隔离它们。 ColorMe类具有display：none;属性。而已。

if ($("#col1Off").is(":checked")){
       $('.toggleMe1').addClass("ColorMe");
  } else {
       $('.toggleMe1').removeClass("ColorMe");
  }
  if ($("#col2Off").is(":checked")) {
        $('.toggleMe2').addClass("ColorMe");
  } else {
    $('.toggleMe2').removeClass("ColorMe");
  }

我必须对所有14列进行此操作。有什么办法可以缩短时间吗？有效率吗？

编辑。代码片段。

用于容纳复选框的模态。在div class =“ Modal-body”中查找以找到它们。现在只有两个

<!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="checkbox" id="col1Off"  data-chclass="toggleMe1" />
                        <label for="col1">Uw</label>
                        <input type="checkbox" id="col2Off"  data-chclass="toggleMe2" />
                        <label for="col2">Client</label>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

用于打开MODAL的代码，以及用于切换隐藏/取消隐藏类的代码。

$('#exampleModal').on('hide.bs.modal', function (e) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes

    $('input[type=checkbox]').change(function () {
        var el = $(this).data('chclass');
        $('.' + el).toggleClass("ColorMe");
    });


    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('Hide or Unhide Columns')
    modal.find('.modal-body input').val(recipient)
})

其中大部分可能不需要。我只是测试一个模态，然后复制示例代码进行测试。

我必须打开两次才能使切换类正常工作

Answer 1

编辑：您需要在$(document).ready()中包含输入更改事件，以便在DOM准备就绪后将其初始化。当前，更改侦听器已添加到模式的hide.bs.modal事件中。请参见下面的代码。

$(function() {
  $('input[type=checkbox]').change(function() {
    var el = $(this).data('chclass');
    $('.' + el).toggleClass("ColorMe");
  });
})

$('#exampleModal').on('hide.bs.modal', function(e) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('Hide or Unhide Columns')
  modal.find('.modal-body input').val(recipient)
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
        </button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
      </div>
      <div class="modal-body">
        <input type="checkbox" id="col1Off" data-chclass="toggleMe1" />
        <label for="col1">Uw</label>
        <input type="checkbox" id="col2Off" data-chclass="toggleMe2" />
        <label for="col2">Client</label>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

添加数据属性，例如。 data-chclass到包含<th>标签类的每个复选框。

例如：<input type="checkbox" data-chclass="toggleMe1" />

然后您可以使用：

$('input[type=checkbox]').change(function() {
    var el = $(this).data('chclass');
    $('.' + el).toggleClass("ColorMe");     
});

使用Jquery根据复选框选择更有效地添加和删除类

1 个答案: