divを1つ表示し、別のdivをjavascriptで非表示にする

Question

id = "modal"のdivを1つ作成しました。このdivにはアンカータグがあります。このタグの内側には、データベースからデータが取り込まれています。

<div id = "modal"> 
<a href = "javascript:void(0)" onclick = "document.getElementById('light_<?php echo $mode_id; ?>').style.display='block';document.getElementById('fade_<?php echo $mode_id; ?>').style.display='none'"><button style="border: none;color: inherit;background-color: white; font-size: 13px;"><?php echo $mode_name; ?> : <?php echo $mode_start_time; ?> - <?php echo $mode_end_time; ?>, <?php echo $mode_day_week; ?> </button></a> 
</div> 

ここで、データがデータベースから取得されたアンカータグをクリックしたときに、その情報を表示します。それはid light_1の最初のdiv（modal）hideの別のdiv（id = "light_"）を表示します。

<div id="light_<?php echo $mode_id; ?>" class="white_content" style = "width: 300px; height: auto;" > 
<div id="fade_<?php echo $mode_id; ?>" class="black_overlay"></div> 
</div> 

Answer 1

あなたはこのサンプルのように、あなたのコードを読みやすくするために呼び出す関数を作成することができます

<div id="modal"> 
    <a href="javascript:void(0)" onclick="show_func()"> <!--Your Codes--> </a> 
</div> 

<script> 
    function show_func(){ 
      $("#modal").hide(); //hide the <div id="modal"> 

      $("#light_1").show(); //show1 
      //or try this one 
      document.getElementById("light_1").innerHTML = "Your Codes"; //show2 
    } 
</script> 

Answer 2

この答えは、jQueryのが必要です。

#fade_* divを非表示にするには、$(#fade_*).delay(delay).fadeOut();を使用します。ここで、遅延は非表示になる時間（アニメーション）です。

最初に非表示にしたいdivにstyle: display: noneを適用します。あなたが使用することができます：

メッセージが表示されるテキストです

$(#light_*).text(''); 
$(#light_*).fadeIn("slow").append(message); 

#light_*のdivを表示するには

。