Пожалуйста, кто-нибудь может критиковать этот код карты? - PullRequest
Новая
       10

Пожалуйста, кто-нибудь может критиковать этот код карты?

1 голос
/ 15 мая 2019

Я искал все выше и ниже рабочий пример карты для печати, чтобы использовать ее в качестве отправной точки для моего собственного проекта.

Я нашел этот код:

Codepen 

var i = 0

$(".points").click(function() {
  if (this.hasClass('points points-on')) {
    this.addClass("points-on");
    console.log("cje");
  } else {
    this.addClass("points-on");
    i = i + 1;
    console.log(i);
  }
});

К сожалению, кнопка не работает, и у меня очень мало опыта работы с javascript.

Может ли кто-нибудь помочь мне разобраться, что здесь происходит и как я могу завершить работу, чтобы при каждом нажатии кнопки круг заполнялся?

Спасибо.

1 Ответ

1 голос
/ 15 мая 2019

CSS и JQuery были написаны странно.Ниже я переписал основную суть того, что он пытался сделать раньше - выберите штампы по клику: 

var storedStamps = +prompt()
var stamps = $('.points')
for (var i = 0; i < storedStamps; i++) {
  stamps.eq(i).addClass('points-on')
}

var i = 0

$(".points").click(function() {
  $(this).toggleClass('points-on')
  $('#points').text($(".points-on").length)
});

function addNextStamp() {
  var points = $(".points")
  for (var i in points) {
    if (!points.eq(i).hasClass('points-on')) {
      points.eq(i).addClass('points-on')
      $('#points').text($(".points-on").length)
      break;
    }
  }
}

function reset() {
  $('.points-on').removeClass('points-on')
  $('#points').text($(".points-on").length)
}
body {
  background-color: #000000;
}

.navbar {
  border-radius: 0px;
}

ul {
  list-style: none;
  padding: 0;
}

.points {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #999;
  margin: 5px;
  background-color: #000;
}

.points-on {
  background-color: #CFFCFF;
}

li {
  display: inline-block;
}

.container {
  width: 80%;
  max-width: 250px;
}

.points {
  border-color: #AAEFDF;
}

.points:active {
  background-color: #AAEFDF;
  border-color: #CFFCFF;
}
<div class="container">
  <div class="row">
    <ul class="score">
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
    </ul>
  </div>
  <div>
    <button type="button" id="addpoints" class="btn btn-default btn-block" onclick="addNextStamp()">ADD POINTS</button>
    <button type="button" id="addpoints" class="btn btn-default btn-block" onclick="reset()">RESET</button>
    <span style="color: white;"><span id="points">0</span> points</span>
  </div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

EDIT: добавлен счетчик

EDIT: добавлена ​​функциональность для кнопки

EDIT: добавлена ​​функция сброса.

ПРИМЕЧАНИЕ. Вы заметите, что я копирую и вставляю эту строку после каждой функции: $('#points').text($(".points-on").length)

Это только для обновления счетчика баллов, что необходимо, если количество штамповвыделенные изменения.

РЕДАКТИРОВАТЬ: добавлены штампы при загрузке

...