單擊單選按鈕時更改段落的類別

Question

我一直在使用以下代碼根據選中的單選按鈕更改<p>的顏色。 我一直在使用紅色和藍色兩個類，但它不起作用。

所以請幫助我。

<html>
<head>
<script type="text/javascript">

var ele = document.getElementsByName('color');


    if (ele[0].checked) { //index has to be j.
          $("p").toggleClass("blue");
    }
    else {
            $("p").toggleClass("red");
    }


</script>

<style type="text/css">

.blue
{
color:blue;
}
.red
{
color:red;  
}
</style>

</head>

<body>

<input type="radio" name="color" value="blue">blue<br>

<input type="radio" name="color" value="red">red


<p>When a user clicks on a radio-button, it becomes checked, and all other radio-buttons         with equal name become unchecked.</p>



</body>
</html>

Answer 1

因此，您的 javascript 將在您的元素甚至存在於 DOM 之前執行。 您應該將 javascript 代碼放在正文的最后，或者將其包含在加載文檔時觸發的事件處理程序中。

HTML ：

<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p id="myParagraph">When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

在香草 JS 中：

document.addEventListener('DOMContentLoaded', function() {

   var radioButtons = document.getElementsByName('color');
   var paragraph = document.getElementById('myParagraph');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){     
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);

    }
});

撥弄這個

或者，如果您使用 jQuery 並將其正確包含在您的頁面中（在您的示例中並非如此）：

$('document').ready(function() {

    $('input:radio').on('change',function(){
        $('#myParagraph').addClass(this.value);
    });

});

撥弄這個

單擊單選按鈕時更改段落的類別

問題描述

1 個解決方案

解決方案1
0 已采納 2014-04-08 10:09:36

單擊單選按鈕時更改段落的類別

問題描述

1 個解決方案

解決方案1 0 已采納 2014-04-08 10:09:36

解決方案1
0 已采納 2014-04-08 10:09:36