Nano Hash - криптовалюты, майнинг, программирование

data-toggle и data-target не работают должным образом

В настоящее время я работаю над html-страницей, где столкнулся со следующей проблемой.

Моя проблема:

Моя html-страница позволяет пользователю выбрать план подписки из следующих вариантов:

  1. Свободно
  2. Стандарт
  3. Премиум

В соответствии с требованиями пользователя я хотел бы включить возможность загрузки файлов только для тарифных планов Стандартный и Премиум . Используя комбинацию data-target и data-toggle, я попытался отобразить параметр загрузки файла для обоих планов. Но параметр загрузки файла работает только для стандартного плана.

Мое исследование:

Я рассмотрел следующие повторяющиеся вопросы о переполнении стека:

Data-toggle и Data-target не работают должным образом

Переключение данных и цель данных не работают

переключение данных и цель данных не работают в начальной загрузке

Я также прошел через следующие сайты:

https://www.codeschool.com/discuss/t/bootstrap-behaviour-added-via-data-toggle-not-working/11339

http://www.w3schools.com/Bootstrap/bootstrap_ref_js_collapse.asp

Однако я не нашел решения своей проблемы:

Любая помощь будет оценена.

Мой код: частичный

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 row">
  <div class="form-group col-md-12">
    <label name ="lblfree" class="full_width"><input value="" type="radio" name="plan"> Free ( 15 Days Trial)</label>
    <label name= "lblstandard" data-toggle= "collapse" data-target= "#demo" class="full_width"><input value="" type="radio" name="plan"> Standard</label>
    <label name= "lblpremium" data-toggle= "collapse" data-target= "#demo" class="full_width"><input value="" type="radio" name="plan"> Premium</label>
  </div>
  <div class="form-group col-md-12">  
    <div id="demo" class="collapse-in">
      <label for="exampleInputPassword1">Upload Banner </label><br>
      <input name="FileUpload" id="FileUpload-id" onchange="ZFLive.addFileUploadFields('FileUpload')" type="file">
      <i>(21.For Standard Plan Banner Resolution is n*n 2.For Premium Plan Banner Resolution is n*n)</i>
    </div>
  </div>
</div>

html jquery twitter-bootstrap-3
06.11.2016

  • Я боюсь, что начальная загрузка позволяет вам только переключаться. Если вам нужно немного более сложное поведение, вы должны написать его самостоятельно (если вам нужна помощь, дайте мне знать, упоминание я в комментарии) 06.11.2016
  • mosh .. спасибо за вашу помощь, как я могу действовать в этом случае? могу ли я написать код javascript для этого? 06.11.2016

Ответы:


1

Как я уже упоминал, я думаю, что вам нужно написать код.

Итак, логика состоит в том, чтобы проверить, какой флажок равен :checked, получить значение и проверить, нужно ли вам slideUp или slideDown.

var checkboxes = $('[name="plan"]').change(function() {
  var val = checkboxes.filter(':checked').val();
  var demo = $('#demo');
  if (val != 'free') {
    demo.slideDown();
  }
  else {
    demo.slideUp();  
  }
});
#demo {
  display: none;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 row">
  <div class="form-group col-md-12">
    <label name ="lblfree" class="full_width"><input value="free" type="radio" name="plan"> Free ( 15 Days Trial)</label>
    <label name= "lblstandard" class="full_width"><input value="stardant" type="radio" name="plan"> Standard</label>
    <label name= "lblpremium" class="full_width"><input value="premium" type="radio" name="plan"> Premium</label>
  </div>
  <div class="form-group col-md-12">  
    <div id="demo">
      <label for="exampleInputPassword1">Upload Banner </label><br>
      <input name="FileUpload" id="FileUpload-id" onchange="ZFLive.addFileUploadFields('FileUpload')" type="file">
      <i>(21.For Standard Plan Banner Resolution is n*n 2.For Premium Plan Banner Resolution is n*n)</i>
    </div>
  </div>
</div>

07.11.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..