陣列結果列在一個下面？-有解無憂

我必須從一開始就提到我是這個世界的新手，所以任何幫助都將不勝感激！

我有一些 Bootstrap 復選框，我想使用 jQuery 列印（window.print）。

唯一的問題是我從復選框創建的陣列一個接一個地列出結果。

HTML：

                  <div class="form-check">
                <input class="form-check-input" name="type" type="checkbox" value="Question1" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                  Question1
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" name="type" type="checkbox" value="Question2" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                  Question2
                </label>
              </div>

jQuery：

$("#results_message").text("The results are:");
$("button").on("click", function () {
 var array = [];
 $("input:checkbox[name=type]:checked").each(function () {
   array.push($(this).val());
 });
 $("#results_after").text(array);
 $('#results_after').printThis();
});

CSS：

#results_after {
  color: green;
  font-size: 24px;
  font-weight: bold;
  visibility: hidden;
}

#results_message {
  visibility: hidden;
}

@media print {
  #results_message,
  #results_after {
    visibility: visible;
  }
}

因為它是一個陣列，所以結果用逗號分隔，我希望它們彼此相鄰。我在想<br>會解決這個問題，但我不知道如何添加它。

非常感謝！

uj5u.com熱心網友回復：

簡短的回答是：使用array.join()分隔符分隔陣列。我選擇了<br />這意味著我需要使用.html()而不是.text().

$("#results_after").html(array.join('<br />')).show()

這.show()是因為您在 css 中隱藏了輸出 div。

$("#results_message").text("The results are:").show();
$("button").on("click", function() {
  var array = [];
  $("input:checkbox[name=type]:checked").each(function() {
    array.push($(this).val());
  });
  $("#results_after").html(array.join('<br />')).show();
});

#results_after {
  color: green;
  font-size: 24px;
  font-weight: bold;
  display: none;
}

#results_message {
  display: none;
}

@media print {
  #results_message,
  #results_after {
    visibility: visible;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <input class="form-check-input" name="type" type="checkbox" value="Question1" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
                  Question1
                </label>
</div>
<div class="form-check">
  <input class="form-check-input" name="type" type="checkbox" value="Question2" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
                  Question2
                </label>
</div>
<hr>
<button>click</button>
<div id='results_message'></div>
<div id='results_after'></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371624.html

標籤：javascript html 查询 css bootstrap-5

上一篇：jQueryKendoGrid從模板呼叫函式

下一篇：元素屬性上的三元運算子