[英]How to change Datatable row background colour based on the condition in a column, Rshiny
[英]How to change background colour in a carousel based on a condition
我想更改價格低於 500 英鎊的輪播元素的背景顏色。 我需要在 JavaScript DOM 中執行此操作,但似乎沒有任何效果……這是我目前想到的:
// Get the elements- price and each carousel element
let price = document.getElementsByClassName("price");
let greenBackground = document.getElementsByClassName("close")[0];
//Prices are given as strings so I tried to convert it to a number to be able to compare
let priceAsNumber = parseInt(price, 10);
//and finally I tried to apply the condition to change the background color
function changeBackground () {
if (priceAsNumber <= 500) {
document.greenBackground.style.background = #81CA81;
}
};
changeBackground();
我是初學者,所以代碼可能會丟失很多,但我真的很感激一些實現結果的提示!
這是一個 html 示例:
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2446px;"><div class="owl-item active" style="width: 152.857px;"><li class="all-months close selected"><label class="date-price-holidays">All Holidays<input type="radio" id="filter60_24" name="filter60" value="24" data-filter="24" data-compare="== 24 && r.matchFlights[jvh.search.settings.currentMonth] >= jvh.search.settings.currentAirportId && '24' == " data-no="50" data-type="groupTxt" data-pos="-1" class="noautostyle filter-active" data-name-value="month" checked="checked" data-no-remember-notification="true"><span><span class="count">516</span> <span>found</span></span></label></li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
<label class="date-price-holidays">
<span class="month">Mar<span class="year">2020</span></span>
<input type="radio" id="filter60_2" name="filter60" value="2" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] >= jvh.search.settings.currentAirportId && r.sale[jvh.search.settings.currentMonth]" data-compare="> 0" data-no="50" data-type="groupTxt" data-pos="2" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
<span class="count-and-price"><span class="count">2</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£629<span class="pp">pp</span></span></span>
</label>
</li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
<label class="date-price-holidays">
<span class="month">Apr<span class="year">2020</span></span>
<input type="radio" id="filter60_3" name="filter60" value="3" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] >= jvh.search.settings.currentAirportId && r.sale[jvh.search.settings.currentMonth]" data-compare="> 0" data-no="50" data-type="groupTxt" data-pos="3" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
<span class="count-and-price"><span class="count">105</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£249<span class="pp">pp</span></span></span>
</label>
</li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
<label class="date-price-holidays">
<span class="month">May<span class="year">2020</span></span>
<input type="radio" id="filter60_4" name="filter60" value="4" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] >= jvh.search.settings.currentAirportId && r.sale[jvh.search.settings.currentMonth]" data-compare="> 0" data-no="50" data-type="groupTxt" data-pos="4" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
<span class="count-and-price"><span class="count">450</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£289<span class="pp">pp</span></span></span>
</label>
</li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
<label class="date-price-holidays">
<span class="month">Jun<span class="year">2020</span></span>
<input type="radio" id="filter60_5" name="filter60" value="5" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] >= jvh.search.settings.currentAirportId && r.sale[jvh.search.settings.currentMonth]" data-compare="> 0" data-no="50" data-type="groupTxt" data-pos="5" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
<span class="count-and-price"><span class="count">402</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£559<span class="pp">pp</span></span></span>
</label>
當你使用let price = document.getElementsByClassName("price");
您將收到一個 HTMLCollection 對象。
我的建議:如果您只想獲取一個元素來使用querySelector
如下所示:
let price = document.querySelector('.price');
let greenBackground = document.getElementsByClassName('.close');
所以在這里你收到了 DOM 元素對象。 然后你應該先得到它的價值,然后再解析它。
let priceAsNumber = parseInt(price.innerText, 10);
所以,整個解決方案應該如下所示:
let price = document.querySelector('.price');
let greenBackground = document.getElementsByClassName('.close');
let priceAsNumber = parseInt(price.innerText, 10);
function changeBackground () {
if (priceAsNumber <= 500) {
document.greenBackground.style.background = #81CA81;
}
};
changeBackground();
這是工作代碼的快速示例和 plunker 示例
<script>
function changeColor(){
// get all price nodes
let priceNodes = document.getElementsByClassName('price');
//iteration over all collected HTMLnodes
for(let i = 0; i< priceNodes.length; i++){
//parse the value and remove euro sign
let nodeWithPrice = priceNodes[i].textContent.slice(1);
//convert string value to numeric
nodeWithPrice = parseInt(nodeWithPrice);
//check according your condition
if(nodeWithPrice <= 500){
//if price less or equal of 500 - change color of html-node
//find your node using Element.closest() method
console.log(priceNodes[i].closest('.close'));
priceNodes[i].closest('.close').style.background = '#81CA81';
}
}
}
changeColor();
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.