时间戳

首页 > 解决方案 > 这个脚本有什么问题？

jquery - 这个脚本有什么问题？

问题描述

https://jsfiddle.net/Ld5s4jLw/1/

我不知道这有什么问题，它不起作用，我尝试了很多东西但无法使它起作用......

function toggleAutre(bloc) {
  if ($('#' + bloc + '_oui').is(':checked')) {
    $('#' + bloc + '_texte').show('slow');
    alert('Oui');
  } else if ($('#' + bloc + '_non').is(':checked')) {
    $('#' + bloc + '_texte').hide('slow');
    alert('Non');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="nbre_poste_inoccupe" id="nbre_poste_inoccupe_oui" value="1" onclick="toggleAutre('nbre_poste_inoccupe');" />
    <label class="form-check-label" for="nbre_poste_inoccupe_oui">OUI</label>
  </div>
  <div class="form-group" id="nbre_poste_inoccupe_text_div" style="display: none;">
    <label for="nbre_poste_inoccupe_text" style="font-size: 0.7em; font-weight: 400;">Si OUI, combien ?</label>
    <input class="form-control" type="number" name="nbre_poste_inoccupe" id="nbre_poste_inoccupe_text" style="width: 5em;" value="1" onclick="toggleAutre('nbre_poste_inoccupe');" />
  </div>
</div>
<div class="col">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="nbre_poste_inoccupe" id="nbre_poste_inoccupe_non" value="0">
    <label class="form-check-label" for="nbre_poste_inoccupe_non">NON</label>
  </div>
</div>

标签： jquery

解决方案

如果我对您的理解正确，id那么您要显示的动态不正确。您正在使用选择器（经过计算，对吗？）#nbre_poste_inoccupe_texte来查找 div nbre_poste_inoccupe_text_div。只需修复它，它就会为您工作。

function toggleAutre(bloc) {
  if ($('#' + bloc + '_oui').is(':checked')) {
    console.log('#' + bloc + '_texte_div');
    $('#' + bloc + '_text_div').show('slow');
    alert('Oui');
  } else if ($('#' + bloc + '_non').is(':checked')) {
    $('#' + bloc + '_texte').hide('slow');
    alert('Non');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="nbre_poste_inoccupe" id="nbre_poste_inoccupe_oui" value="1" onclick="toggleAutre('nbre_poste_inoccupe');" />
    <label class="form-check-label" for="nbre_poste_inoccupe_oui">OUI</label>
  </div>
  <div class="form-group" id="nbre_poste_inoccupe_text_div" style="display: none;">
    <label for="nbre_poste_inoccupe_text" style="font-size: 0.7em; font-weight: 400;">Si OUI, combien ?</label>
    <input class="form-control" type="number" name="nbre_poste_inoccupe" id="nbre_poste_inoccupe_text" style="width: 5em;" value="1" onclick="toggleAutre('nbre_poste_inoccupe');" />
  </div>
</div>
<div class="col">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="nbre_poste_inoccupe" id="nbre_poste_inoccupe_non" value="0">
    <label class="form-check-label" for="nbre_poste_inoccupe_non">NON</label>
  </div>
</div>

推荐阅读