[英]change the style of only first element in an array of class elements using javascript
我有這個包含列表的 html 代碼。 在我的 css listName 設置為 display='none'
當 dom 頁面打開時,我需要顯示 class="listName" 的第一個元素。顯然,js 中的這個 class 是一個數組。你能告訴我嗎
我需要使頁面更加用戶友好。 我需要顯示一個 li,如果用戶決定預訂更多貨件,他可以單擊添加更多貨件以顯示另一個 li
css 文件有這個
.listHolder {
display: none;
}
這是它現在的樣子
<div class="container">
<div class="listHolder" th:each="freight, itemStat : *{freightsDto}">
<ul class="list">
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
</ul>
</div>
<div id="toggleBtn" class="row mtp">
<button id="addBtn" class="col-sm-12">
Add more shipments
</button>
</div>
</div>
您可以使用 class "listName" 獲取元素列表,並更改該列表的第一個元素。
Javascript
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
window.onload = function(){ // Get elements with class name var elements_array = document.getElementsByClassName("listName"); // Change first element elements_array[0].style.display = "block"; }
.listName { display: none; }
<html> <body> <div class="listHolder"> <ul class="list"> <li> <span class="listName">Macbook</span> </li> <li> <span class="listName">Amazon Firestick</span> </li> <li> <span class="listName">Keyboard</span> </li> <li> <span class="listName">Headphones</span> </li> <li> <span class="listName">Airpods</span> </li> </ul> </div> </body> </html>
我認為您可以使用 JavaScript
<script type="text/javascript">
// create the function with JavaScript
function removerClass() {
// get all elements with listName class
let element = document.getElementsByClassName("listName");
// get the first element
element = element[0];
// remove the element's class
element.classList.remove("listName");
}
// call the function when the page is loaded
removerClass()
</script>
我希望它有用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.