Modelo de confirmação com jQuery

Question

Eu tenho um link direcionado para '/FridgeTemperatureRoute'e uma caixa de seleção. O objetivo da caixa de seleção é mostrar ao usuário se a verificação foi feita ou não.

    <div class="row">
      <div class="col">
        <a id="FridgeTemperatureBtn" href="/FridgeTemperatureRoute">Fridge and Freezer Temperature</a>
      </div>
      <div class="col">
        <input id="FridgeTemperatureCheckBox" type="checkbox" name="" value="" disabled {{fridgeFreezerTemperatureReturnObj}}>
      </div>
    </div>

Resumo do código

Você verá esta linha {{fridgeFreezerTemperatureReturnObj}}- é do servidor Node JS, que determina se o checkbox is ticked or not.

Jquery, Javascript e modelo de bootstrap

Em seguida, pretendo abrir um bootstrap modelcom o clique do usuário, mas apenas se checkboxfor ticked. Se o usuário clicar e a caixa de seleção estiver marcada, abra um modelo de bootstrap perguntando se deseja continuar hrefou simplesmente cancelar a renderização da próxima página.

  <!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body" id="confirmMessage">
        <p>You have already completed this check, do you want to do it again?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="confirmOk">Ok</button>
            <button type="button" class="btn btn-default" id="confirmCancel" data-dismiss="modal">Cancel</button>
          </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    if(document.getElementById('FridgeTemperatureCheckBox').checked){
      $('#FridgeTemperatureBtn').attr('data-toggle', 'modal'); $('#FridgeTemperatureBtn').attr('data-target', '#confirmModal');
      document.getElementById('FridgeTemperatureBtn').addEventListener('click', function(e){
        $('#confirmOk').click(function(){
          window.location.href = '/FridgeTemperatureRoute';
        });        
      });
    }
</script>

Resumo

Eu o tenho funcionando - mas acredito que pode ser simplificado. Só estou procurando por alguns comentários e onde posso melhorar :)

Answer 1

Ser consistente

Se você for usar jQuery, seria estilisticamente apropriado (e terser) usá-lo em vez dos métodos DOM nativos. Por exemplo:

if(document.getElementById('FridgeTemperatureCheckBox').checked){

pode se transformar em

if ($('#FridgeTemperatureCheckBox').is(':checked')) {

Para traduzir getElementByIdpara jQuery ou querySelector, coloque um #na frente do ID que você deseja selecionar.

Ou você pode usar métodos DOM vanilla em qualquer lugar, se preferir (como eu) - mas seja o que for que você escolha fazer, seria bom fazê-lo de forma consistente , caso contrário, você provavelmente confundirá futuros leitores do código.

HTML também : Em uma nota similar sobre a consistência - com os seus IDs de elementos, melhor escolher um ou outro camelCase, PascalCaseou kebab-caseem todos os lugares, mas não misturar e combinar estilos diferentes, então você está mais propenso a correr em typo problemas quando você não faz tenha um estilo definido e lembre-se mal qual estilo você usou (Você também pode considerar o uso de classes em vez de IDs, uma vez que IDs com suas variáveis ​​globais automaticamente não são intuitivos e podem causar bugs.)

Código DRY

Em vez de selecionar o mesmo elemento várias vezes, por exemplo:

$('#FridgeTemperatureBtn').attr('data-toggle', 'modal');
$('#FridgeTemperatureBtn').attr('data-target', '#confirmModal');

Seria mais elegante selecionar o elemento uma vez e salvá-lo em uma variável. Ou, melhor ainda, uma vez que .attrretorna a coleção jQuery existente, apenas encadeie as .attrchamadas:

$('#FridgeTemperatureBtn')
  .attr('data-toggle', 'modal')
  .attr('data-target', '#confirmModal');

Anexe o listener uma vez, imediatamente : Parece que confirmModalsó fica visível quando o usuário clica no botão e já concluiu a verificação, correto? Nesse caso, considere anexar o #confirmOkouvinte de clique imediatamente, em vez de apenas depois de #FridgeTemperatureBtnclicar em. (Anexar ouvintes idênticos várias vezes não causará problemas neste caso, mas é uma lógica peculiar.)

Semântica: seu FridgeTemperatureBtné um <a>, não um botão, então o nome de seu ID provavelmente deve ser ajustado. Se você o tiver estilizado para se parecer com um botão com seu CSS, provavelmente seria um pouco mais semanticamente apropriado cercar um <button>dentro de um <a>.

Caixa de seleção inalterável UX : The #FridgeTemperatureCheckBoxis disabled. Ter uma caixa de seleção não é nada intuitivo, porque os usuários geralmente esperam que as caixas de seleção sejam clicáveis. Considere informar ao usuário que a verificação já foi feita de outra forma, como adicionando uma marca de seleção (não uma caixa de seleção), ou alterando a cor de fundo, ou algo parecido.