数组结果在下面列出一个?
Posted
技术标签:
【中文标题】数组结果在下面列出一个?【英文标题】:Array results listed one below each other? 【发布时间】:2022-01-07 11:57:02 【问题描述】:我必须从一开始就提到我是这个世界的新手,所以任何帮助都将不胜感激!
我有一些 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>
会解决这个问题,但我不知道如何添加它。
非常感谢!
【问题讨论】:
【参考方案1】:简短的回答是:使用array.join()
通过分隔符分隔数组。我选择了<br />
,这意味着我需要使用.html()
,而不是.text()
。
$("#results_after").html(array.join('<br />')).show()
.show()
是因为您将输出 div 隐藏在 css 中。
$("#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>
【讨论】:
它就像一个魅力,非常感谢!祝你有个愉快的夜晚!以上是关于数组结果在下面列出一个?的主要内容,如果未能解决你的问题,请参考以下文章