Несколько флажков на одной странице

Может ли кто-нибудь помочь мне с моей рейтинговой системой? Я пытаюсь продублировать свой раздел с классом контейнера (Весь индикатор выполнения), но всякий раз, когда я делаю это, панель рейтинга работает только для одного из индикаторов выполнения. Я помнил, чтобы изменить идентификаторы вторых флажков, чтобы они не мешали. Это код с одним индикатором прогресса, но я хочу больше из них.

Кстати, было бы полезно, если бы кто-нибудь знал достойный способ поделиться этим беспорядком кода, который у меня здесь есть.

PHP + HTML:

<?php $num = 2; ?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Animated Progress Bar</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <section class="container">
        <input type="radio" class="radio twenty" name="progress" value="twenty" id="twenty" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty" class="label">1</label>

        <input type="radio" class="radio fourty" name="progress" value="fourty" id="fourty" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty" class="label">2</label>

        <input type="radio" class="radio sixty" name="progress" value="sixty" id="sixty" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty" class="label">3</label>

        <input type="radio" class="radio eighty" name="progress" value="eighty" id="eighty"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty" class="label">4</label>

        <input type="radio" class="radio onehundred" name="progress" value="onehundred" id="onehundred" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred" class="label">5</label>

        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </section>
</body>
</html>

CSS:

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #323232;
}
.container {
  margin: 80px auto;
  width: 640px;
  text-align: center;
}
.container .progress {
  margin: 0 auto;
  width: 150px;
}
.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
  position: relative;
  height: 10px;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.progress-bar:before {
  bottom: 0;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  z-index: 2;
  bottom: 45%;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
.twenty:checked ~ .progress > .progress-bar {
  width: 20%;
  background-color: #f63a0f;
}
.fourty:checked ~ .progress > .progress-bar {
  width: 40%;
  background-color: #f27011;
}
.sixty:checked ~ .progress > .progress-bar {
  width: 60%;
  background-color: #f2b01e;
}
.eighty:checked ~ .progress > .progress-bar {
  width: 80%;
  background-color: #f2d31b;
}
.onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}
.radio {
  display: none;
}
.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
}
.radio:checked + .label {
  color: white;
  background: rgba(0, 0, 0, 0.25);
}
Источник

2 ответа

Решение

Для вашей второй группы прогресса вам нужно изменить следующее

  • id каждого элемента ввода (радио не флажок)
  • for атрибут меток, чтобы соответствовать с новым id элементов ввода
  • name элементов ввода, так как они являются переключателями, которые сгруппированы по имени

Таким образом, вторая группа приведет к этой структуре HTML

<section class="container">
    <input type="radio" class="radio twenty" name="progress-2" value="twenty" id="twenty-2" />
    <label for="twenty-2" class="label">1</label>
    <input type="radio" class="radio fourty" name="progress-2" value="fourty" id="fourty-2" />
    <label for="fourty-2" class="label">2</label>
    <input type="radio" class="radio sixty" name="progress-2" value="sixty" id="sixty-2" />
    <label for="sixty-2" class="label">3</label>
    <input type="radio" class="radio eighty" name="progress-2" value="eighty" id="eighty-2" />
    <label for="eighty-2" class="label">4</label>
    <input type="radio" class="radio onehundred" name="progress-2" value="onehundred" id="onehundred-2" />
    <label for="onehundred-2" class="label">5</label>
    <div class="progress">
        <div class="progress-bar"></div>
    </div>
</section>

Рабочая демонстрация на http://jsfiddle.net/gaby/mfNYu/1/

Источник

Попробуйте этот код:

PHP + HTML

 <?php
     $num = 3;
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Animated Progress Bar</title>
  <link rel="stylesheet" href="my.css">
</head>
<body>
    <section class="container">
        <input type="radio" class="radio twenty" name="progress" value="twenty" id="twenty" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty" class="label">1</label>

        <input type="radio" class="radio fourty" name="progress" value="fourty" id="fourty" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty" class="label">2</label>

        <input type="radio" class="radio sixty" name="progress" value="sixty" id="sixty" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty" class="label">3</label>

        <input type="radio" class="radio eighty" name="progress" value="eighty" id="eighty"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty" class="label">4</label>

        <input type="radio" class="radio onehundred" name="progress" value="onehundred" id="onehundred" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred" class="label">5</label>

        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </section>

    <section class="container">
        <input type="radio" class="radio twenty2" name="progress2" value="twenty" id="twenty2" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty2" class="label">1</label>

        <input type="radio" class="radio fourty2" name="progress2" value="fourty" id="fourty2" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty2" class="label">2</label>

        <input type="radio" class="radio sixty2" name="progress2" value="sixty" id="sixty2" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty2" class="label">3</label>

        <input type="radio" class="radio eighty2" name="progress2" value="eighty" id="eighty2"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty2" class="label">4</label>

        <input type="radio" class="radio onehundred2" name="progress2" value="onehundred" id="onehundred2" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred2" class="label">5</label>

        <div class="progress2">
            <div class="progress-bar"></div>
        </div>
    </section>
</body>
</html>

CSS:

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #323232;
}
.container {
  margin: 80px auto;
  width: 640px;
  text-align: center;
}
.container .progress, .container .progress2 {
  margin: 0 auto;
  width: 150px;
}
.progress, .progress2 {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
  position: relative;
  height: 10px;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.progress-bar:before {
  bottom: 0;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  z-index: 2;
  bottom: 45%;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
.twenty:checked ~ .progress > .progress-bar, .twenty2:checked ~ .progress2 > .progress-bar {
  width: 20%;
  background-color: #f63a0f;
}
.fourty:checked ~ .progress > .progress-bar, .fourty2:checked ~ .progress2 > .progress-bar {
  width: 40%;
  background-color: #f27011;
}
.sixty:checked ~ .progress > .progress-bar, .sixty2:checked ~ .progress2 > .progress-bar {
  width: 60%;
  background-color: #f2b01e;
}
.eighty:checked ~ .progress > .progress-bar, .eighty2:checked ~ .progress2 > .progress-bar {
  width: 80%;
  background-color: #f2d31b;
}
.onehundred:checked ~ .progress > .progress-bar, .onehundred2:checked ~ .progress2 > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}
.radio {
  display: none;
}
.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
}
.radio:checked + .label {
  color: white;
  background: rgba(0, 0, 0, 0.25);
}

это прекрасно работает для меня, вам просто нужно изменить следующее имя, класс и CSS следующих индикаторов выполнения.

В этом случае я попытался добавить progress2, twenty2 и так на следующих индикаторах прогресса..

Что ж, если вы хотите создать так много индикаторов прогресса на странице, вы можете сделать HTML внутри цикла php или использовать jQuery для манипулирования DOM...

надеюсь, что это работает!

Источник
Другие вопросы по тегам