bonus

by Zephir_z

HTML

<?php $adborder = 1; ?>
<input id="bannedType" type="hidden" value="<?= $adborder; ?>">

<div id="one">1</div>
<div id="two" class="green">2</div>
<div id="three" class="green">3</div>

<hr>

<div id="first" class="activeWithBorder">
  Нажмите на 1й баннер
  <div class="text1">
    &#10008;
  </div>
</div>


<div id="second">
  Нажмите на 2й баннер
  <div class="text2">
    &#10008;
  </div>
</div>


<div id="third">
  Нажмите на 3й баннер
  <div class="text3">
    &#10008;
  </div>
</div>

<hr>

<div id="button" class="noneBlock">
  <form action="" method="post">
    <table width="330" border="0" align="center">
      <tr>
        <td align="center"></td>
      </tr>
      <tr>
        <td align="center"><input type="submit" name="bonus" value="Получить бонус" style="height: 30px; margin-top:10px;"></td>
      </tr>
    </table>
  </form>
</div>

CSS

.greenBorder{
    color: green;
    border: 2px solid black;
}

.redWithoutBorder{
    color: red;
}

.activeWithBorder{
  border: 2px solid black;
}

.green{
    color: green;
    pointer-events: none; /* делаем ссылку некликабельной */
    cursor: default;  /* устанавливаем курсор в виде стрелки */

}

.noneBlock{
    display: none;
}

JavaScript

let bannedType = $('#bannedType').val();

if (bannedType == 1) {
	$('#one').addClass('green');
} else {
	$('#one').addClass('greenBorder');
}

$('#one').click(function(){
  	$('#one').addClass('redWithoutBorder').removeClass('greenBorder');
    $('.text1').text("Ok");
   	$('#first').removeClass('activeWithBorder');
    $('#second').addClass('activeWithBorder');
    $('#two').addClass('greenBorder').removeClass('green');
});

$('#two').click(function(){
  	$('#two').addClass('redWithoutBorder').removeClass('greenBorder');
    $('.text2').text("Ok");
    $('#three').addClass('greenBorder').removeClass('green');
    $('#second').removeClass('activeWithBorder');
    $('#third').addClass('activeWithBorder');
});
  
$('#three').click(function(){
		$('#three').addClass('redWithoutBorder').removeClass('greenBorder');
  	$('.text3').text("Ok");
    $('#third').removeClass('activeWithBorder');
    $('#button').removeClass('noneBlock');
});