मैं एक ब्लॉक के पृष्ठभूमि रंग को बदलने की कोशिश कर रहा हूं जब एक रेडियो बटन, जो ब्लॉक के भीतर है, क्लिक किया जाता है।

मैंने यह किया लेकिन मुझे समझ में नहीं आता कि यह क्यों काम नहीं करता है। यहाँ कोड है:

$(document).ready(function() {
    $('#rad').click(function() {
        $('#label').addClass('radio-active');
    });
});
.radio-active {
    background-color: black;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="radio-item" id="label">
      <input id="rad" type="radio" name="rad" >
      <label class="radio-label"for="f-option">£25</label>
  </li>
</ul>

धन्यवाद

1
BeeLee 31 अगस्त 2017, 17:49

4 जवाब

सबसे बढ़िया उत्तर

जैसा कि अन्य ने उल्लेख किया है, ऐसा लगता है जैसे आप सीएसएस को <style> टैग में लपेटना भूल गए हैं।

मैंने आपके jQuery को वेनिला जेएस में फिर से लिखा है - चूंकि यह अपेक्षाकृत सरल कार्य है जिसे आप प्राप्त करने का प्रयास कर रहे हैं, वेनिला क्यों नहीं जाते? :-)

document.querySelector("#rad").addEventListener("change", function() {
    var label = document.getElementById("label");
    label.classList.add("radio-active");
});
.radio-active {
    background-color: black;
    color: white;
}
<ul>
  <li class="radio-item" id="label">
      <input id="rad" type="radio" name="rad" >
      <label class="radio-label"for="f-option">£25</label>
  </li>
</ul>
1
David Wilkinson 31 अगस्त 2017, 18:26

यह सीएसएस कोड डालें:

.radio-active {
    background-color: black;
    color: white;
}

style टैग के साथ जैसे:

<style>
.radio-active {
    background-color: black;
    color: white;
}
</style>
2
Mayank Pandeyz 31 अगस्त 2017, 18:03

मुझे लगता है कि आप अपने सीएसएस वर्ग के आसपास <style> टैग खो रहे थे। क्योंकि आपका कोड काम कर रहा है:

$(document).ready(function() {
  $('#rad').click(function() {
    $('#label').addClass('radio-active');
  });
});
.radio-active {
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="radio-item" id="label">
    <input id="rad" type="radio" name="rad" >
    <label class="radio-label"for="f-option">£25</label>
</li>
1
hallleron 31 अगस्त 2017, 17:52

यह यहाँ पूरी तरह से काम करता है ...

क्या आप jQuery को सही तरीके से कॉल कर रहे हैं?

<style>
.radio-active {
    background-color: black;
    color: white;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#rad').click(function() {
        $('#label').addClass('radio-active');
    });
});
</script>

<ul>


<li class="radio-item" id="label">
    <input id="rad" type="radio" name="rad" >
    <label class="radio-label"for="f-option">£25</label>
</li>

<li class="2radio-item" id="label2">
    <input id="rad2" type="radio" name="rad2" >
    <label class="radio-label2"for="f-option2">£35</label>
</li>

</ul>

छवि अपलोड

0
Bruno Mosciatti G. Maciel 31 अगस्त 2017, 17:57