0

我有一个对象，想将其详细信息添加到JQUERY-CONFIRM的内容中。

这是我的代码： 

const obj = {
  'alphabets':['abc', 'xyz', 'pqr'],
  'colors':['red', 'blue', 'purple']
}

$.dialog({
	title: 'Test',
	columnClass: 'col-md-6 col-md-offset-6',
	content: function() {
		for (let key in obj) {
			return `<h3 class='float-left'>${key}</h3>
						<ul class='float-left'>
							<li class='float-left'>${obj[key]}</li>
						</ul>
						`;
		}
	},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

为什么我只获得内容中的第一个键值，以及为什么它们没有在列表中列出，而是显示为逗号分隔值？

4

1 回答 1

1

您遍历对象键，但总是在第一次迭代时返回。

您可以使用.map将所有obj键/值对映射到 HTML 字符串，然后.join它们：

Object.keys(obj).map(mapToHtml).join('')

colors并alphabets显示为逗号分隔值，因为您将整个数组放入一个<li>元素中：<li class='float-left'>${obj[key]}</li>. 要创建多个<li>元素，您需要将数组的每个元素映射到一个新的<li>：

const list = obj[key].map(li => `<li class='float-left'>${li}</li>`).join('');


const obj = {
  'alphabets':['abc', 'xyz', 'pqr'],
  'colors':['red', 'blue', 'purple']
}

const mapToHtml = key => {
    const list = obj[key].map(li => `<li class='float-left'>${li}</li>`).join('');
    return `<h3 class='float-left'>${key}</h3><ul class='float-left'>${list}</ul>`;
}

$.dialog({
    title: 'Test',
    columnClass: 'col-md-6 col-md-offset-6',
    content: () => Object.keys(obj).map(mapToHtml).join('')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

于 2020-06-16T19:38:10.533 回答