数组结果在下面列出一个?

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;
  

因为它是一个数组,所以结果用逗号分隔,我希望它们彼此下方。我在想&lt;br&gt; 会解决这个问题,但我不知道如何添加它。

非常感谢!

【问题讨论】:

【参考方案1】:

简短的回答是:使用array.join() 通过分隔符分隔数组。我选择了&lt;br /&gt;,这意味着我需要使用.html(),而不是.text()

$("#results_after").html(array.join('&lt;br /&gt;')).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>

【讨论】:

它就像一个魅力,非常感谢!祝你有个愉快的夜晚!

以上是关于数组结果在下面列出一个?的主要内容,如果未能解决你的问题,请参考以下文章

C++:列出字符串的排列

在下面所述的代码中实现错误处理时需要帮助[重复]

Uva120 Stacks of Flapjacks

Vscode中运行js文件或部分代码 ,在下面cmd输出中显示结果

循环获取,保持结果顺序

在 keyup 上过滤数组结果