Question

我创建了一个名为扇区的模式框。当用户单击我的模式框中的子类别时，单击“应用”后，图像将显示在屏幕上。

问题是我一次只能显示一张图像，而不能显示与它们的子类别相关的两个图像。

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').siblings().first().html('').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;
}

.spaz {
  color: blue;
  margin-left: 40%
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->

<!-- 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> <span class="spaz"></span>
</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">
      <img src="https://tse4.mm.bing.net/th?id=OIP.qKsWIt_Qae6vtWd3-RulIQHaHa&pid=Api&P=0&w=300&h=300.jpg"> 
    </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">
      <img src="https://tse3.mm.bing.net/th?id=OIP.HcL9FITSR_SWsLMgMFMkYAHaEo&pid=Api&P=0&w=281&h=176.jpg">
    </div>
  </div>
  <div>
    <div>
      <p style="float:right">
        <a href="#" rel="modal:close" class="onlyThese;"> 
          <b>Apply</b>
        </a>
      </p>
    </div>
  </div>

预期结果是：

用户点击我的模式框，称为扇区t
用户与子类别进行互动
用户在点击后与两个子类别进行了互动时应用子类别的图像，它们各自的图像应出现在屏幕上。

Answer 1

问题出在content = $("#" + $(this).data('target')).html();上，您正在重新分配内容值，您想要做的就是将新值添加到内容中，如下所示。

当前您可以多次添加所有图像，但是一次又一次地打开框，这是您要实现的目标还是错误？

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() {
  var elemContent = $("#" + $(this).data('target')).html();
  if ($(this).prop("checked")) {
    //$("#" + $(this).data('target')).removeClass('hideme');
    content += elemContent;
  } else {
    //$("#" + $(this).data('target')).addClass('hideme');
    content = content.replace(elemContent, '');
  }

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


$('[rel="modal:close"]').on('click', () => {
  $('.btn').siblings().first().html('').append(content);
  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;
}

.spaz {
  color: blue;
  margin-left: 40%
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->

<!-- 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> <span class="spaz"></span>
</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">
      <img src="https://tse4.mm.bing.net/th?id=OIP.qKsWIt_Qae6vtWd3-RulIQHaHa&pid=Api&P=0&w=300&h=300.jpg"> 
    </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">
      <img src="https://tse3.mm.bing.net/th?id=OIP.HcL9FITSR_SWsLMgMFMkYAHaEo&pid=Api&P=0&w=281&h=176.jpg">
    </div>
  </div>
  <div>
    <div>
      <p style="float:right">
        <a href="#" rel="modal:close" class="onlyThese;"> 
          <b>Apply</b>
        </a>
      </p>
    </div>
  </div>

模式框关闭后，如何在屏幕上显示两个图像？

1 个答案: