किसी शर्त के आधार पर कैरोसेल में पृष्ठभूमि का रंग कैसे बदलें

Question

मैं हिंडोला तत्वों की पृष्ठभूमि का रंग बदलना चाहता हूं, जिनकी कीमत £500 से कम है। मुझे इसे जावास्क्रिप्ट डोम में करने की ज़रूरत है लेकिन कुछ भी काम नहीं कर रहा है .... यहां तक कि मैं अब तक आया हूं:

// 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();

मैं एक नौसिखिया हूं, इसलिए कोड में बहुत कमी हो सकती है, लेकिन परिणाम प्राप्त करने के लिए मैं वास्तव में कुछ युक्तियों की सराहना करता हूं!

एचटीएमएल का नमूना यहां दिया गया है:

<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 &amp;&amp; r.matchFlights[jvh.search.settings.currentMonth] &gt;= jvh.search.settings.currentAirportId &amp;&amp; &#39;24&#39; == " 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] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 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] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 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] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 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] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 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>

javascript dom carousel background-color owl-carousel

0

Magda Jarkiewicz 4 मार्च 2020, 12:56

क्या आप प्रश्न में HTML कोड भी शामिल कर सकते हैं ??

–

Maniraj Murugan

4 मार्च 2020, 12:59

कृपया एक न्यूनतम प्रतिलिपि प्रस्तुत करने योग्य उदाहरण बनाएं ताकि हम वर्तमान आउटपुट देख सकें या किसी भी त्रुटि के साथ स्पष्टीकरण प्रदान कर सकें

–

Jacob

4 मार्च 2020, 12:59

let price = document.getElementsByClassName("price"); क्या आपको इसके साथ तत्व या मूल्य मिल रहा है

–

Prakash Reddy Potlapadu

4 मार्च 2020, 13:01

मैं इसे इस वेबसाइट के लिए करने का प्रयास कर रहा हूं jamesvillas.co.uk/… क्या इससे मदद मिलेगी?

–

Magda Jarkiewicz

4 मार्च 2020, 13:05

let price = document.getElementsByClassName("price") इसके द्वारा आपको तत्वों की एक सरणी मिलती है। आपको लूप करना होगा और इनरटेक्स्ट प्राप्त करना होगा और फिर parseInt() करना होगा

–

Prakash Reddy Potlapadu

4 मार्च 2020, 13:07

Answer 1

जब आप let price = document.getElementsByClassName("price"); का उपयोग कर रहे हों तो आपको एक HTMLCollection ऑब्जेक्ट प्राप्त होगा।

मेरी सिफारिश: यदि आप केवल querySelector का उपयोग करने के लिए केवल एक तत्व प्राप्त करना चाहते हैं नीचे की तरह:

let price = document.querySelector('.price');
let greenBackground = document.getElementsByClassName('.close');

तो यहां आप डोम एलिमेंट ऑब्जेक्ट प्राप्त कर रहे हैं। फिर आपको पहले इसका मूल्य प्राप्त करना चाहिए और फिर इसे पार्स करना चाहिए।

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();

0

Oleh Morozov 4 मार्च 2020, 13:19

Answer 2

प्लंकर पर काम करने वाले कोड और उदाहरण का त्वरित उदाहरण यहां दिया गया है

<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>

https://plnkr.co/edit/Ln9YXuAowbeWCKJ9Ifzt?p=info

0

Paul Zaslavskij 4 मार्च 2020, 13:44

किसी शर्त के आधार पर कैरोसेल में पृष्ठभूमि का रंग कैसे बदलें

2 जवाब

संबंधित सवाल

नए सवाल