मैं सीएसएस और jQuery के लिए नया हूँ। मैं आइकन में रंग भरना चाहता हूं। उदाहरण के लिए, इंस्टाग्राम के हार्ट आइकन की तरह (जब डबल टैप किया जाता है तो यह लाल रंग से भर जाता है)।

मैं उसी के लिए भयानक फ़ॉन्ट का उपयोग कर रहा हूँ। इसलिए मैं दिल का आइकन प्राप्त करने में सक्षम हूं लेकिन मैं जिस तरह से चाहता हूं वह रंग नहीं भर सकता। मैंने पृष्ठभूमि-रंग संपत्ति को बदलने की कोशिश की लेकिन यह भी काम नहीं करता है।

बात यह है कि जब उपयोगकर्ता दिल के आइकन पर क्लिक करता है, तो उसे लाल रंग से भरना चाहिए। क्या आप कृपया मेरा मार्गदर्शन कर सकते हैं?

My html file
<!DOCTYPE html>
<html>
<head>
  <title></title>
<script type="text/javascript" src="all.js"></script>
</head>

<body>
<div id="sp"><i class="far fa-heart" id="heart" style="color: green; background-color: red" ></i> </div>
</body>
</html>
all.js file is the file i downloaded for icons.

अगर यह काम नहीं करता है, तो मुझे भयानक फ़ॉन्ट के बजाय क्या उपयोग करना चाहिए?

2
Dev Solanki 3 अप्रैल 2018, 13:10

3 जवाब

आप इस तरह ऑनक्लिक विशेषता का उपयोग कर सकते हैं:

<div id="sp"><i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i></div>

और आपके स्क्रिप्ट क्षेत्र या फ़ाइल में इस तरह के फ़ंक्शन को परिभाषित करें:

function changeColor() {
          document.getElementById("heart").style.color = "red";  }
0
s.sobati 3 अप्रैल 2018, 10:25

Jquery toggleClass का उपयोग करके आप इस तरह के तत्वों में प्रत्येक तत्व से कक्षाएं जोड़ या हटा सकते हैं।

$("#heart").on("click", function() {
  $(this).toggleClass('oldColor', 'newColor');
});
.newColor {
  color: red;
}

.oldColor {
  color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script type="text/javascript" src="all.js"></script>
</head>

<body>
  <div id="sp"><i class="far fa-heart oldColor" id="heart">Heart</i> </div>
</body>

</html>
1
Shree 3 अप्रैल 2018, 10:28

आपको आइकन में ऑनलिक फ़ंक्शन जोड़ने की आवश्यकता है, और इसका रंग बदलने के लिए एक फ़ंक्शन बनाएं।

<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>

और आपका जेएस इस तरह होना चाहिए:

function changeColor()
{
   var icon = document.getElementById('heart');
   icon.style.color = "red";    
}
1
sromero 3 अप्रैल 2018, 10:20