已关闭。此问题需要details or clarity。目前不接受回答。
**要改进此问题吗？**通过editing this post添加详细信息并阐明问题。
10天前关门了。
Improve this question的
我目前正在使用List.js制作一个可过滤的网格。现在我想让网格有不同的大小，所以一个项目应该比另一个大。我想使用一个类来实现这一点，但li.需要获取类。在数据中是dataname。
我怎样才能获得要添加到LI标记中的dataname值？
var options = {
item: 'hacker-item',
};
var values = [{
name: 'Abraham',
city: 'Stockholm',
dataname: 'test1'
},
{
name: 'Jonas',
city: 'Berlin',
dataname: 'test2'
},
{
name: 'Bob',
city: 'Edmonton',
dataname: 'test3'
},
{
name: 'Hulk',
city: 'Calgary',
dataname: 'test4'
},
{
name: 'Daniel',
city: 'New York',
dataname: 'test5'
},
{
name: 'Susan',
city: 'Edmonton',
dataname: 'test6'
},
];
// Creating the list object
var hackerList = new List('hacker-list', options, values);
// Set data-name attribute and text content for each item in the list
var listItems = document.querySelectorAll('.list-item');
hackerList.on('updated', function() {
listItems.forEach(function(item, index) {
var hackerData = hackerList.items[index].values();
// Set the data-name attribute for the entire list item
item.setAttribute('data-name', hackerData.dataname);
// Set the text content of the h4 element inside the list item
item.querySelector('.name').textContent = hackerData.name;
});
});ul.list {
padding: 0;
list-style: none;
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 20px;
}
.list li {
padding: 10px 20px;
}
.list li+li {
border-top: 1px solid #ccc;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section>
<div id="hacker-list">
<ul class="list">
</ul>
</div>
</section>
<div style="display:none;">
<li id="hacker-item" class="list-item" class="dataname" dataname="dataname">
<h4 class="name"></h4>
<p class="city"></p>
<div class="dataname"> </div>
</li>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
1条答案
按热度按时间mutmk8jj1#
我不是100%清楚你在要求什么，我也不知道这个列表库是做什么的。但是我想你是说你没有把这些属性添加到你的元素中？问题可能是你只是在一个事件处理程序中添加元素属性。所以如果那个事件从来没有被触发，属性也从来没有被添加。
我只是将您的代码移动到一个由事件处理程序调用的函数中，但我也在处理程序外部调用它，以便它在页面加载时至少运行一次。
对于样式，如果你想用一个特定的属性值来样式化一个元素，CSS有相应的语法。