javascript - 如何在模态框中正确放置 .addClass 和 .removeClass？

Question

问题是我已经意识到我应该停止在我的 javascript 中使用 .hide 和 .show。现在我了解到更好的替代方法是使用 .addClass 和 .removeClass 因为这提供了更好的控制和更多的风格化。

但是由于某些原因，代码无法正常工作。我能得到帮助吗？

我已经用新的 .addClass 和 .removeClass 替换了之前的 .hide 和 .show，我提供了一个名为 showme 的新类，甚至提供了 css 来将代码显示为一个 block 。

var content = "";
$('a[href="#ex5"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
    escapeClose: false,
    clickClose: false,
    showClose: false,
  });
  $('#myDiv, #myDivs').hide();
  $('input[type=checkbox]').prop('checked', false);
});

$('.yourCheckbox, .yourCheckboxx').change(function() {
  if ($(this).prop("checked")) {
    $("#" + $(this).data('target')).addClass('showme');
    content = $("#" + $(this).data('target')).html();
  } else {
    $("#" + $(this).data('target')).removeClass('showme');
    content = "";
  }
});


$('[rel="modal:close"]').on('click', () => {
  $('.btn').parent().append(content);
})

.onlyThese {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="checkbox"]+label {
  color: blue
}

input[type="checkbox"] {
  display: none
}

input[type="checkbox"]:checked+label {
  color: red
}


}
input:focus {
  outline: none;
}
.showme {
  display: block;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<p>
  <a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
  <div style="float:left;">
    <p>
      <input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
      <label for="group1" class="onlyThese">Publication </label>
    </p>
    <div id="myDiv" class="showme"> blastoise </div>
    <p>
      <input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
      <label for="group2" class="onlyThese">Food </label>
    </p>
    <div id="myDivs" class="showme"> water </div>
  </div>
  <div>
    <div>
      <p style="float:right">
        <a href="#" rel="modal:close" ; class="onlyThese;"> <b>Apply</b> </a>
      </p>
    </div>
  </div>

我想要的只是让代码按照以前使用 .hide 和 .show 的方式工作，但现在使用 .addClass和 .removeClass。

Answer 1

您可能必须在不同的条件下删除和添加类，或者您可以使用 toggleClass 使用 .hideme 类而不是 .showme:

var content = "";
$('a[href="#ex5"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
    escapeClose: false,
    clickClose: false,
    showClose: false,
  });
  $('#myDiv, #myDivs').addClass('hideme');
  $('input[type=checkbox]').prop('checked', false);
});

$('.yourCheckbox, .yourCheckboxx').change(function() {
  if ($(this).prop("checked")) {
    //$("#" + $(this).data('target')).removeClass('hideme');
    content = $("#" + $(this).data('target')).html();
  } else {
    //$("#" + $(this).data('target')).addClass('hideme');
    content = "";
  }

  $("#" + $(this).data('target')).toggleClass('hideme');
});


$('[rel="modal:close"]').on('click', () => {
  $('.btn').parent().append(content);
})

.onlyThese {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="checkbox"]+label {
  color: blue
}

input[type="checkbox"] {
  display: none
}

input[type="checkbox"]:checked+label {
  color: red
}


}
input:focus {
  outline: none;
}

.hideme {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<p>
  <a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
  <div style="float:left;">
    <p>
      <input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
      <label for="group1" class="onlyThese">Publication </label>
    </p>
    <div id="myDiv" class="showme"> blastoise </div>
    <p>
      <input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
      <label for="group2" class="onlyThese">Food </label>
    </p>
    <div id="myDivs" class="showme"> water </div>
  </div>
  <div>
    <div>
      <p style="float:right">
        <a href="#" rel="modal:close" ; class="onlyThese;"> <b>Apply</b> </a>
      </p>
    </div>
  </div>