将对象内容添加到JQUERY-CONFIRM

Question

我有一个对象，并希望将其详细信息添加到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>

​

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

Answer 1

循环遍历对象键，但始终在第一次迭代时返回。

您可以使用.map将所有HTML键/值对映射到obj字符串，然后对它们进行.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>

​