Как я могу сделать условие формы иметь любую ценность - PullRequest
0 голосов
/ 12 июня 2019

На основе этого кодового элемента https://codepen.io/rhulrathee/pen/eQMmZw/

Вот моя ручка https://codepen.io/Chazlie/pen/agOvEM

(function($) {
  $.fn.conditionize = function(options){  
    var settings = $.extend({
      hideJS: true
    }, options );

    $.fn.showOrHide = function(listenTo, listenFor, $section) {
      if ($(listenTo).is('select, input[type=text]') && $(listenTo).val() == listenFor ) {
        $section.slideDown();
      } else if ($(listenTo + ":checked").val() == listenFor) {
        $section.slideDown();
      } else {
        $section.slideUp();
      }
    } 

    return this.each( function() {
      var listenTo = "[name=" + $(this).data('cond-option') + "]";
      var listenFor = $(this).data('cond-value');
      var $section = $(this);

      //Set up event listener
      $(listenTo).on('change', function() {
        $.fn.showOrHide(listenTo, listenFor, $section);
      });
      // If setting was chosen, hide everything first...
      if (settings.hideJS) {
        $(this).hide();
      }
      //Show based on current value on page load
      $.fn.showOrHide(listenTo, listenFor, $section);
    });
  }

}(jQuery));

$('.conditional').conditionize(); 

А HTML-код

<p>
  <label>or type:</label>
  <input type="text" name="example6" placeholder="yay">
</p>
<div class="conditional" data-cond-option="example6" data-cond-value="yay">
  I want to changed this from needing yay to anything, so it could be someones name
  <BR>
  <label><input type="checkbox" name="example7"><span></span> Are you sure?</label>
  <label><input type="checkbox" name="example8"><span></span> Really super sure?</label>
</div>
<div class="conditional" data-cond-option="example8" data-cond-value="on">
  I want this one to show if example 7 and/or 8 was ticked
</div>

Что яя пытаюсь достичь:

Пользователь может ввести что угодно в пример 6, чтобы отобразить следующее условие, а затем пользователь может установить флажки в примере 7 или 8, а затем отобразится последний элемент div.

Извинения, я довольно новичок в Jquery и очень хочу учиться


Редактировать:

Я нашел, что именование примера 7 и примера 8 оба одинаковы, кажетсяПолучите это так, если какой-либо параметр отмечен, то следующий параметр показывает.

Итак, теперь мне нужно найти способ сделать так, чтобы текстовое поле позволяло всему, что написано, отображать следующий раздел

Редактировать 2. Просто попытался поместить ввод [text = text] как.val () == '' - в надежде, что это будет просто означать, если значение текстового поля является чем-то, то показать следующий div с условием соответствия .. Что тоже не сработало

$.fn.showOrHide = function(listenTo, listenFor, $section) {
      if ($(listenTo).is('select') && $(listenTo).val() == 'listenFor' ) {
        $section.slideDown();
      }
     else if ($(listenTo).is(' input[type=text]') .val() == '' ) {
        $section.slideDown();
      }
      else if ($(listenTo + ":checked").val() == listenFor) {
        $section.slideDown();
      }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...