jquery - クラス名の値に応じてクラス名をすべて変更します

Question

私は現在、 の中にあるものを持ってclass ="screenPower"いますclass="screenItem"。

screenItemクリックイベントがあります：

$(".screenItem").click(function() {
    var clickedbutton = this;
}

私の質問は次のとおりです。クリックしたときscreenPower screenOffにに変更するにはどうすればよいですか? screenPower screenOnがscreenOffクリックされると、現在アクティブscreenOnになっているものをオフにする必要があります。- つまり、一度に 1 つの画面しか持つことができませんscreenOn。

私が本質的にやりたいことは次のようなものです：

if(clicked && == "screenPower screenOff) {
//change target class to screenPower screenOn
//change current active class to screenPower screenOff
}

HTML

<div class="screenItem">
    <div class="screenImage1">  <span></span>

        <img src="images/img.gif" class="img-rounded img-responsive" alt="KSRasmussen" />
    </div>
    <div class="screenPower screenOn"></div>
</div>
<div class="screenItem">
    <div class="screenImage1">  <span></span>

        <img src="images/img.gif" class="img-rounded img-responsive" alt="KSRasmussen" />
    </div>
    <div class="screenPower screenOff"></div>
</div>