jquery要素のIDが正しく変更されていません

Question

私は現在、Webサイトプロジェクトに取り組んでいます。私には3つのdivがあります。それらのどれか1つをクリックすると幅80％のスペースが必要になりますが、何かの理由で1つが動作しないのは、3回のスクリプト行でワンプーンを切り替えるまで動作していません。それは意味をなさない。 それは働いているスキームは次にあります：私は* openと* close idsのために異なるマークアップを持っています。divの1つをクリックすると、以下のように変わります。誰がここで何が起こっているのか分かっていますか？

<script> 

$('#twoclose').click(function() { 
$('#twoclose').prop('id', 'twoopen'); 
$('#oneopen').prop('id', 'oneclose'); 
$('#threeopen').prop('id', 'threeclose'); 

}); 
</script> 

<script> 
$('#threeс').click(function() { 
$('#threeс').prop('id', 'threeopen'); 
$('#oneopen').prop('id', 'oneclose'); 
$('#twoopen').prop('id', 'twoclose'); 

}); 
</script> 

<script> 
$('#oneclose').click(function() { 
$('#oneclose').prop('id', 'oneopen'); 
$('#threeopen').prop('id', 'threeclose'); 
$('#twoopen').prop('id', 'twoclose'); 

}); 
</script> 

Answer 1

イベントをバインドすると、それはその要素にバインドされます。 idを変更すると、イベントは自動的に変更されません。スタイルを変更するには、クラスを使用します。

コードをシンプルにして、IDをハードコードする必要はありません。

$(".box").on("click", function() { 
 
    $(".box.active").removeClass("active"); 
 
    $(this).addClass("active"); 
 
});

.box {display: inline-block; width: 100px; height:100px; border: 1px solid black;} 
 
.box.active { background-color: green; }

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