появление кнопки после 3х кликов по банеру

Question

<?php
  $adborder = 1;
?>

<div class="textnew2"></div>
<div class="blocknew">1</div>
<div class="block2new">2</div>
<div class="block3new">3</div>

<div class="somenew"></div>
<div class="textnew">нажмите на 1й баннер &#10008;</div>

<div class="some2new"></div>
<div class="text2new">нажмите на 2й баннер &#10008;</div>

<div class="text3new">нажмите на 3й баннер &#10008;</div>
<div class="some3new">
  <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>

.blocknew{
    color: green;
    border: 2px solid black;
}
.add {
  background: black;
}
.some_1new{
    color: red;
}
.some2new{
    display: none;

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

}
.some_12new{
    color: red;
}
.some3new{
    display: none;

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

}
.some_123new{
    color: red;
}

$('.blocknew').click(function(){
  $('.somenew').toggle().addClass('some_1new');
  $('.blocknew').addClass('some_1new').removeClass('blocknew');
  $('.block2new').addClass('blocknew').removeClass('block2new');
  $('.textnew').text("нажмите на 1й баннер ок");
});

  $('.block2new').click(function(){
    $('.some2new').toggle().addClass('some_12new');
    $('.block2new').addClass('some_12new').removeClass('block2new');
    $('.block3new').addClass('blocknew').removeClass('block3new');
    $('.text2new').text("нажмите на 2й баннер ок");
  });

  $('.block3new').click(function(){
    $('.some3new').toggle().addClass('some_123new');
    $('.block3new').addClass('some_123new').removeClass('block3new');
    $('.text3new').text("нажмите на 3й баннер ок");
  });

Подскажите что я сделал не правильно?

Нужно что бы при клике на первый убирался border с первого и переходил на второй и тд.

После клика на 3й ни у кого не было border.

И как придумать условие? У мня есть переменная $adborder она равна 1 или 2.

Если она 1, то первый баннер без border, если 2, то с бордер

Answer 1

Переписал правда, не особо понятно было: https://jsfiddle.net/Zephir_z/qp7y0zvg/2/

jQquery:
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');
});

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;
}

Fiddle не дает заюзать так пыху, но должно работать. Чекни потом в консоли, чтоб из скрытого инпута приходил модификатор банера с рамкой и без.

Answer 2

судя по описанию сделать вы пытаетесь что-то подобное. Это, конечно, не ответ, что у вас не так. но краткая реализация описанного поведения

$(".b-wrapper").on('click', '.banner.active', function(){
   let idx = $(this).index();
   $(this).removeClass('active')
          .addClass('done')
          .next()
            .addClass('active');
   
   $(".msg").eq(idx).addClass('done');
});

.banner.active { border: 1px solid black; }
.banner.done { color: green; }

.msg::after {
  content: "x";
}
.msg.done::after {
  content: "ok";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b-wrapper">
  <div class="banner active">1</div>
  <div class="banner">2</div>
  <div class="banner">3</div>
</div>

<div class="m-wrapper">
  <div class="msg">Нажмите 1 - </div>
  <div class="msg">Нажмите 2 - </div>
  <div class="msg">Нажмите 3 - </div>
</div>

БЛОГ НА HUSL

появление кнопки после 3х кликов по банеру

Ответы (2 шт):