選擇選項

後的Javascript/jQuery的變化類選擇，所以我有一個選擇框，其顏色是灰色的，但選擇一個選項後，框的顏色應該變成黑色。我使用下面的代碼來完成這個事件選擇選項

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
} 
 
.black_color{ 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

我似乎無法找出我的錯誤。

來源

2016-09-22 Anup Gupta

你不是應該在樣式選項標籤，而不是選擇？ – Utkanos

它的工作正常。開始時它在選擇後變成灰色，變成黑色。你面臨什麼問題？ –

你是指背景顏色？ – depperm

似乎按照您的要求工作。

這裏是鏈接到代碼：http://codepen.io/anon/pen/rrjGEO

標記：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Select Box</title> 
    <script src="https://code.jquery.com/jquery-3.1.0.js" 
      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" 
      crossorigin="anonymous"></script> 

    <style> 
     .grey_color { 
      color: #999; 
     } 

     .black_color { 
      color: #000; 
     } 
    </style> 

    <script> 
     $(document).ready(function() { 
      $('.change_color').on("change", function() { 
       $(this).removeClass('grey_color'); 
       $(this).addClass('black_color'); 
      }); 
     }); 

    </script> 
</head> 
<body> 
    <div> 
     <select class="change_color grey_color"> 
      <option>12th Standard</option> 
      <option>High School</option> 
      <option>First Year</option> 
     </select> 
    </div> 
</body> 
</html>

來源

2016-09-22 13:56:10

let opt = document.querySelector(".change_color"); 
 

 
opt.addEventListener("change", function() { 
 
    this.classList.remove("grey_color"); 
 
    this.classList.add("black_color"); 
 
    console.log(1); 
 
});

.grey_color { 
 
    background: #999; 
 
} 
 
.black_color { 
 
    background: #000; 
 
    color: #FFF; 
 
}

<div> 
 
    <select class="change_color grey_color"> 
 
    <option>12th Standard</option> 
 
    <option>High School</option> 
 
    <option>First Year</option> 
 
    </select> 
 
</div>

我覺得是因爲你不能改變文本的顏色嗎？我真的不知道爲什麼，但我知道是爲了我

來源

2016-09-22 13:48:27

現在我運行我自己的代碼片斷，它在堆棧溢出上運行良好，但它不能用於我的項目。問題是我想的其他事情。 –

如果您可以請就您的代碼進行調查，我認爲這會有所幫助？ –

我只需要添加document.ready ..現在它的工作正常。謝謝你的時間。 –

您的代碼工作似乎是工作（儘管你可以在片段中失去周圍的JavaScript/jQuery代碼的script標籤）。選擇某項時，選擇列表的顏色會從灰色變爲黑色。

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
} 
 
.black_color{ 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

你期待的背景色，而不是更改文本顏色的？如果這就是你的意圖，你可以改變CSS讓它改變background-color屬性？請看下圖：

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
    background-color: none; 
 
} 
 
.black_color{ 
 
    background-color: #000; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

來源

2016-09-22 13:48:59

你的代碼工作，但你的CSS類設置顏色屬性，更改文本顏色。如果你想改變背景顏色，那麼你必須使用background-color屬性。

.grey_color { 
    background-color: #999; 
} 
.black_color { 
    background-color: #000; 
    color: #fff; 
}

來源

2016-09-22 13:54:35 Nemery

我不得不加$（文件）。就緒在我的劇本，現在它的工作完全正常。

<script> 
 
     $(document).ready(function() { 
 
      $('.change_color').on("change", function() { 
 
       $(this).removeClass('grey_color'); 
 
       $(this).addClass('black_color'); 
 
      }); 
 
     }); 
 

 
    </script>

來源

2016-09-22 14:04:05

回答

相關問題