Question

让我具体来说，当我点击复选框时它需要检查状态（我有2个复选框）第一个是正确的，第二个是不正确的，如果我点击第一个然后点击第二个但是我再次点击第一个之后然后我点击“下一步”它保存了2个正确的状态，但这是一个很大的问题，因为最后我需要计算多少答案是正确的，这会改变正确答案的百分比。我该怎么办才能只保存一次复选框？

state = 0;
var pMin = 1;
var pMax = <? php echo $count ?> ;
var respuestas = [];
var correcto = 0;
var incorrecto = 0;
porcentaje = 0;

function play(pfile) {
  console.log(pfile);

  var source = '<audio id="audio_player"><source id="audio_player_ogv" src="audios/' + pfile + '.ogg"  type="audio/ogg"  /><source id="audio_player_ogv" src="audios/' + pfile + '.mp3"  type="audio/mpeg" /></audio>';
  $('#divAudio_Player').html(source);
  var aud = $('#audio_player').get(0);
  aud.play();
}

function ActivecheckAnswers(e) {
  $("#p" + pMin + " .boton").addClass("ver2");
}

function checkAnswers(e) {
  $("#p" + pMin + " .respuesta").addClass("ver");
}
$(".sonido li").click(function() {
  console.log(this.className);
});

function Califica(opc) {
  $(".continuar").addClass("ver");
  respuestas[pMin] = opc;
  if (opc == 1) {
    correcto++;
    $("#p" + pMin + " .respuesta .opciones .opc1").attr('checked', true);
    $("#p" + pMin + " .respuesta .opciones .opc2").attr('checked', false);
    $('.opc1').on("click", function() {
      if ($(this).prop('checked')) {
        $('.button').show();
      } else {
        $('.button').hide();
      }
    });

  } else if (opc == 2) {
    incorrecto++;
    $("#p" + pMin + " .respuesta .opciones .opc1").attr('checked', false);
    $("#p" + pMin + " .respuesta .opciones .opc2").attr('checked', true);
    $('.opc2').on("click", function() {
      if ($(this).prop('checked')) {
        $('.button').show();
      } else {
        $('.button').hide();
      }
    });
  }
};

function siguiente() {
  var aud = $('#audio_player').get(0);
  aud.pause();

  $(".plantilla .continuar").removeClass("ver");
  if (pMin < pMax) {
    $("#p" + pMin).removeClass("ver");
    pMin++;
    $("#p" + pMin).addClass("ver");
    state = 0;
  }
  if (pMin == 9) {
    porcentaje = correcto * 100 / (pMax - 1);
    alert("Tienes" + porcentaje + "%correcto");
  }
}

</head>

<body>
  <div id="general">
    <div hidden>
      <audio id="audio" src=""></audio>
      <div id="divAudio_Player">
        <audio id="audio_player">
          <source id="audio_player_ogv" src="" type="audio/ogg" />
          <source id="audio_player_mp3" src="" type="audio/mpeg" />
        </audio>
      </div>
    </div>


    <ul class="plantilla">
      <?php $count=1 ; while ($count <=9 ) { ?>

      <li id="p<?=$count ?>" <?php if ($count==1){echo "class='ver'";} ?>>
        <img src="img/foto<?=$count ?>.jpg">
        <ul class="sonido">
          <li class="record"><i class="fa fa-microphone"></i> Record (Grabar)</li>
          <li class="stop"><i class="fa fa-stop"></i> Stop (Detener)</li>
          <li class="play"><i class="fa fa-volume-up"></i> Listen (Escuchar)</li>
        </ul>


        <div class="pregunta">I want some roast____.</div>
        <input type="button" onclick="checkAnswers()" value="Check answers" class="boton">

        <div class="respuesta">
          <input type="button" onclick="play('audio<?=$count ?>')" value="I want some roast beef" class="playsound">
          <div class="opciones">
            <p style="margin-left:50px;" class="hh"><b>Evaluate Yourself</b>
            </p>
            <img class="img1" src="img/correcto.png" onClick="Califica(1)">
            <input class="opc1" type="checkbox" value="1" onClick="Califica(1)" />
            <label class="label1" for="label1">Good</label>
            <img class="img2" src="img/incorrecto.png" onClick="Califica(2)">
            <input class="opc2" type="checkbox" value="2" onClick="Califica(2)" />
            <label class="label2" for="label2" style="height:200px; width:50px;">Not Enough</label>
          </div>
        </div>
      </li>
<?php
        $count++;

    }
    $count--;
    ?>


      <div class='continuar'>
        <input type="button" onclick="siguiente()" value="Continuar" class="button">
      </div>

    </ul>

  </div>
</body>

</html>
<script>
</script>

Answer 1

我认为你应该删除onClick函数并根据类添加一个事件监听器。然后，您可以将另一个类添加到单击的项目中，以便在单击它时进行记录。

这是一个帮助您入门的基本示例。您需要添加更多内容，但它为您提供了逻辑的基本概念。

$(document).ready(function() {
    $(".opc1").on('change', function() {
        if(!$(this).hasClass('item-checked')){
            correcto++;
            $(this).addClass('item-checked');
        }
    });

   $(".opc2").on('change', function() {
        if(!$(this).hasClass('item-checked')){
            incorrecto++;
            $(this).addClass('item-checked');
        }
    });
})

每次我点击复选框都需要检查状态

1 个答案: