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

Question

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

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

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>

预期结果是:

• 用户点击我的模态框 sectors t
• 用户与子类别互动
• 当用户通过点击与两个子类别进行交互时将图像应用于两个子类别，它们各自的图像应该出现在屏幕上。

Answer 1

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

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

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>