jQuery .show () .hide () не работает

Question

jQuery .show () .hide () не работает

0

Я работаю над проектом IBM и по соображениям конфиденциальности, я не могу показать вам точный контент.

Я новичок в JS и AngularJS и вообще не знаю о jQuery. Я хочу показать определенные разделы div, когда соответствующий флажок установлен. Я пробовал это с помощью JS и AngularJS, но ничего не получал. Пожалуйста, взгляните на код и, пожалуйста, помогите мне. Кроме того, было бы намного проще, если бы можно было решить проблему с использованием JS/AngularJS (более предпочтительно AngularJS)

Код:

 var checkbox1 = $("#check1");
 checkbox1.change(function(event) {
   var checkbox1 = event.target;
   if (checkbox1.checked) {
     $("#userform2").show();
   } else {
     $("#userform2").hide();
   }
 });
 var checkbox2 = $("#check2");
 checkbox2.change(function(event) {
   var checkbox2 = event.target;
   if (checkbox2.checked) {
     $("#userform4").show();
   } else {
     $("#userform4").hide();
   }
 });
 var checkbox3 = $("#check3");
 checkbox3.change(function(event) {
   var checkbox3 = event.target;
   if (checkbox3.checked) {
     $("#userform5").show();
   } else {
     $("#userform5").hide();
   }
 });
 var checkbox4 = $("#check4");
 checkbox4.change(function(event) {
   var checkbox4 = event.target;
   if (checkbox4.checked) {
     $("#userform3").show();
   } else {
     $("#userform3").hide();
   }
 });
 var checkbox5 = $("#check5");
 checkbox5.change(function(event) {
   var checkbox5 = event.target;
   if (checkbox5.checked) {
     $("#userform6").show();
   } else {
     $("#userform6").hide();
   }
 });
 var checkbox6 = $("#check6");
 checkbox6.change(function(event) {
   var checkbox6 = event.target;
   if (checkbox6.checked) {
     $("#userform7").show();
   } else {
     $("#userform7").hide();
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<body id="ibm-com" class="ibm-type">
  <div id="ibm-top" class="ibm-landing-page">
    <div id="ibm-content-wrapper">
      <div class="ibm-columns">
        <div class="ibm-col-6-1">&nbsp;</div>
        <div class="ibm-col-6-4">
          <form id="userform1" class="ibm-column-form" method="post" action="">
            <br />
            <h2 class="ibm-h2">Random Title 1</h2>
            <p class="ibm-form-elem-grp">
              <label class="ibm-form-grp-lbl">Type of Request:</label>
              <span class="ibm-input-group">
	          <input id="check1" name="requestType1" type="checkbox" /> Checkbox #1			            
         	  <br /><input id="check2" name="requestType1" type="checkbox" /> Checkbox #2
                  <br /><input id="check3" name="requestType1" type="checkbox" /> Checkbox #3
	          <br /><input id="check4" name="requestType1" type="checkbox" /> Checkbox #4
	          <br /><input id="check5" name="requestType1" type="checkbox" /> Checkbox #5
	          <br /><input id="check6" name="requestType1" type="checkbox" /> Checkbox #6
	      </span>
            </p>
            <div id="userform2" class="ibm-column-form" hidden>
              <br />
              <h2 class="ibm-h2">Random Title 2</h2>
              <p>
                Hello from Checkbox #1
              </p>
            </div>
            <div id="userform3" class="ibm-column-form" hidden>
              <br />
              <h2 class="ibm-h2">Random Title 3</h2>
              <p>
                Hello from Checkbox #4
              </p>
            </div>
            <div id="userform4" class="ibm-column-form" hidden>
              <br />
              <h2 class="ibm-h2">Random Title 4</h2>
              <p class="ibm-form-elem-grp">
                Hello from Checkbox #2
              </p>
            </div>
            <div id="userform5" class="ibm-column-form" hidden>
              <br />
              <h2 class="ibm-h2">Random Title 5</h2>
              <p>
                Hello from Checkbox #3
              </p>
            </div>
            <div id="userform6" class="ibm-column-form" hidden>
              <br />
              <h2 class="ibm-h2">Random Title 6</h2>
              <p>
                Hello from Checkbox #5
              </p>
            </div>
            <div id="userform7" class="ibm-column-form" hidden>
              <br />
              <h2 class="ibm-h2">Random Title 7</h2>
              <p>
                Hello from Checkbox #6
              </p>
            </div>
            <div id="userform8" class="ibm-column-form">
              <br />
              <h2 class="ibm-h2">Random Title 8</h2>
              <p>
                Bye
              </p>
              <br />
            </div>
          </form>
        </div>
        <div class="ibm-col-6-1">&nbsp;</div>
      </div>
    </div>
  </div>

Test User 05 июль 2016, в 11:02

Источник

0

это выглядит хорошо, что вы ожидаете?
guradio 05 июль 2016, в 08:07
0

Возможный дубликат того, как показать / скрыть div на основе выбора флажка в угловых js
Weedoze 05 июль 2016, в 08:12
4

Пожалуйста, прочтите этот минимальный воспроизводимый пример с акцентом на минимальный - есть много дублированного кода, который вполне может существовать в вашем оригинале, но не помогает изолировать потенциальную проблему.
freedomn-m 05 июль 2016, в 08:12
0

проверьте, <script src="http://1.www.s81c.com/common/v18/js/www.js"></script> есть какая-то ошибка типа. и ... есть некоторые переопределения $ используемые jQuery в <script type="text/javascript" src="http://www.ibm.com/web/wcm/connect/standards/3b4bfbfe-55d4-4d5d-8e4d-efa56a3b26a9/new-js.js?MOD=AJPERES"></script>
Yourim Yi 05 июль 2016, в 08:13
0

просто откройте консоль и проверьте, что $ в порядке. :)
Yourim Yi 05 июль 2016, в 08:14
0

codepen.io/nive00/pen/yJXKmx
Nivedita 05 июль 2016, в 08:22
0

Я только думаю, что $(document).ready(function(){}); пропал, отсутствует, ?
Deepak Yadav 05 июль 2016, в 08:27
0

Если один из ответов - это то, что вы искали, не могли бы вы принять его? Если нет, не могли бы вы предоставить нам более подробную информацию?
Weedoze 05 июль 2016, в 10:38

Показать ещё 6 комментариев

Теги:

javascript

jquery

html

angularjs

4 ответа

Ещё вопросы

это выглядит хорошо, что вы ожидаете?
Возможный дубликат того, как показать / скрыть div на основе выбора флажка в угловых js
Пожалуйста, прочтите этот минимальный воспроизводимый пример с акцентом на минимальный - есть много дублированного кода, который вполне может существовать в вашем оригинале, но не помогает изолировать потенциальную проблему.
проверьте, <script src="http://1.www.s81c.com/common/v18/js/www.js"></script> есть какая-то ошибка типа. и ... есть некоторые переопределения $ используемые jQuery в <script type="text/javascript" src="http://www.ibm.com/web/wcm/connect/standards/3b4bfbfe-55d4-4d5d-8e4d-efa56a3b26a9/new-js.js?MOD=AJPERES"></script>
просто откройте консоль и проверьте, что $ в порядке. :)
Я только думаю, что $(document).ready(function(){}); пропал, отсутствует, ?
Если один из ответов - это то, что вы искали, не могли бы вы принять его? Если нет, не могли бы вы предоставить нам более подробную информацию?

Weedoze · Answer 1 · 2016-07-05T06-24-00.000Z

Вот простой пример того, как скрыть/показать div со связанным флажком.

Два div - каждая ссылка на свой флажок.

HTML

<input type="checkbox" id="check1" name="Checkbox1" ng-model="checkbox1" />
<input type="checkbox" id="check2" name="Checkbox2" ng-model="checkbox2" />

<div ng-show="checkbox1">
    <h1>This div is shown thanks to checkbox #1</h1>
</div>

<div ng-show="checkbox2">
    <h1>This div is shown thanks to checkbox #2</h1>
</div>

Рабочий JSFiddle

Avseiytsev Dmitriy · Answer 2 · 2016-07-05T07-40-00.000Z

Чтобы ваш код работал, вы должны проверить .prop("checked") вместо проверки свойства checked

Например: $("#check1").prop("checked")

Но я предлагаю вам использовать Bootstrap http://getbootstrap.com/javascript/#tabs

wmash · Answer 3 · 2016-07-05T05-48-00.000Z

Для решения jQuery это будет работать: jsFiddle

$("input[type=checkbox]").on("change", function() {
    var numericId = $(this).attr("id").replace("check",'');
    if ($(this).is(":checked")) {
        $("#userform" + numericId).show();
    } else {
        $("#userform" + numericId).hide();
    }
});

Dayle Salmon · Answer 4 · 2016-07-05T06-40-00.000Z

Я считаю, что .change() теперь мертв, и он должен быть .change() on("change", function(){}), а также вместо повторения всего вашего кода вы можете использовать оператор $.each. Дайте мне 5 минут, и я напишу что-нибудь.

Вы могли бы написать что-то вроде этого, если вы хотите сделать это в JQuery:

$('input[type="checkbox"]').on('change', function() {
    var checkboxID = $(this).attr('id');
    $('[data-id="' + checkboxID + '"]').toggle();
});

И все, что вам нужно сделать, это добавить тот же идентификатор, который установлен на флажке в виде идентификатора данных. НАПРИМЕР:

<input id="check6" name="requestType1" type="checkbox" />

<div id="userform6" class="ibm-column-form" hidden data-id="check6">
    <br />
    <h2 class="ibm-h2">Random Title 2</h2>
        <p>
            Hello from Checkbox #1
        </p>
</div>

Это избавит вас от необходимости повторять код.

Каковы ваши доказательства того, что .change устарел?
.change не будет работать для динамически добавляемых элементов. Для таких случаев рекомендуется использовать .on или .bind . Но если у вас есть статический элемент, вы можете использовать .change . Для справки: elijahmanor.com/…
Только что проверил документы, я принял .change за изменения .load, .unload и т.д. в jQuery 3.0.