Может быть, кто-то может мне помочь. Я пытаюсь показать различные элементы div в зависимости от выбранной радио-кнопки.

У меня есть проект MVC. В моем файле .cshtml у меня есть:

      $(document).ready(function () {
          $('input[type="radio"]').on("change", function () {
           var test = $(this).val();
           $(".bla").hide();
           $("#" + test).show();
       }); 
      });

И:

     @using (Html.BeginForm("CreateEvent", "Calendar", FormMethod.Post, new @class = "form-horizontal" }))
     {
                         <div>
                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "privateDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "private", @checked = true}) smth1</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "groupsDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "groups"}) smth2</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "classesDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "classes"}) smth3</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "allDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "all" }) smth4</label>
                            </div>
                        </div>
                        <div id="privateDiv" class="bla">private</div>
                        <div id="groupsDiv" class="bla">groups</div>
                        <div id="classesDiv" class="bla">
                            @Html.DropDownListFor(model => model.SelectedValues, Enumerable.Empty<SelectListItem>(),new { @class="chosen-select", tabindex = "4", @id="mySelect", @multiple = true})
                        </div>

                        <div id="allDiv" class="bla">
                            all
                        </div>
     }

Проблема в том, что элементы div не скрываются и не отображаются при нажатии на них. Кто-нибудь может объяснить, почему это поведение javascript / html такое и как это исправить?

< Сильный > ИЗМЕНИТЬ

  <form action="/Calendar/Calendar/CreateEvent/" class="form-horizontal" method="post">                        <div class="modal-body">
                        <label class="control-label">Title:</label>
                        <div class="row">
                            <div class='col-sm-12'>
                                <div class="form-group">
                                    <input class="form-control" id="Title" name="Title" placeholder="Title here" type="text" value="" />
                                </div>
                            </div>
                        </div>

                        <label class="control-label">Date from:</label>
                        <div class="row">
                            <div class='col-sm-12'>
                                <div class="form-group">
                                    <div class='input-group date' id='datestart'>
                                        <input class="form-control" id="StartDate" name="StartDate" type="text" value="" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <label class="control-label">EndDate:</label>
                        <div class="row">
                            <div class='col-sm-12'>
                                <div class="form-group">
                                    <div class='input-group date' id='dateend'>
                                        <input class="form-control" id="EndDate" name="EndDate" type="text" value="" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <label>Udostępnij dla:</label>
                        <div>
                            <div class="i-checks checkbox-inline">
                                <label> <input checked="True" class="choseOptionClass" id="private" name="Distribution" type="radio" value="privateDiv" /> Prywatne</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> <input class="choseOptionClass" id="groups" name="Distribution" type="radio" value="groupsDiv" /> Grupa</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> <input class="choseOptionClass" id="classes" name="Distribution" type="radio" value="classesDiv" /> Przedmiot</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> <input class="choseOptionClass" id="all" name="Distribution" type="radio" value="allDiv" /> Wszyscy</label>
                            </div>
                        </div>
                        <div id="privateDiv" class="bla">private</div>
                        <div id="groupsDiv" class="bla">groups</div>
                        <div id="classesDiv" class="bla">
                            <select class="chosen-select" id="mySelect" multiple="True" name="SelectedValues" tabindex="4"></select>
                        </div>

                        <div id="allDiv" class="bla">
                            all
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add event</button>
                    </div>
</form>

@JAG, я сделал так, как ты сказал, и ничего не отображается в консоли. Но у меня есть jquery, связанный на моей странице:

<script src="/Scripts/jquery-3.1.0.min.js"></script>

<script src="/Scripts/bootstrap.min.js"></script>

<script src="/Scripts/plugins/metisMenu/metisMenu.min.js"></script>

<script src="/Scripts/plugins/pace/pace.min.js"></script>

<script src="/Scripts/plugins/slimScroll/jquery.slimscroll.min.js"></script>

<script src="/Scripts/app/inspinia.js"></script>



<script src='/Scripts/jquery-ui/jquery-ui.js'></script>

<script src='/Scripts/moment.min.js'></script>

<script src='/Scripts/fullcalendar/fullcalendar.js'></script>

<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>

<script type="text/javascript" src="/Scripts/iCheck/icheck.js"></script>

<script type="text/javascript" src="/Scripts/chosen/chosen.jquery.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $('input[type="radio"]').on("change", function() {
      console.log('working'); // see it logs on console 
      debugger; // this will pause the code here
      var test = $(this).val();
      $(".bla").hide();
      $("#" + test).show();
      });
    });
</script>
2
Ant 6 Янв 2017 в 17:18

3 ответа

Лучший ответ

Проблема была с icheck.js. Вместо того:

      $('input[type="radio"]').on("change", function() {
        console.log('working'); // see it logs on console 
        debugger; // this will pause the code here
        var test = $(this).val();
        $(".bla").hide();
        $("#" + test).show();
      })

Должен быть использован:

     $('input').on('ifChecked', function (event) {
            var divToShow = event.target.value;
            $(".bla").hide();
            $("#" + divToShow).show();
        });
1
Ant 6 Янв 2017 в 16:39

Ваш код, кажется, работает как есть после запуска tidy:

$(document).ready(function() {
  $('input[type="radio"]').on("change", function() {
    var test = $(this).val();
    $(".bla").hide();
    $("#" + test).show();
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="control-label">Title:</label>
<div class="row">
  <div class='col-sm-12'>
    <div class="form-group">
      <input class="form-control" id="Title" name="Title" placeholder="Title here" type="text" value="" />
    </div>
  </div>
</div>

<label class="control-label">Date from:</label>
<div class="row">
  <div class='col-sm-12'>
    <div class="form-group">
      <div class='input-group date' id='datestart'>
        <input class="form-control" id="StartDate" name="StartDate" type="text" value="" />
        <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>
<label class="control-label">EndDate:</label>
<div class="row">
  <div class='col-sm-12'>
    <div class="form-group">
      <div class='input-group date' id='dateend'>
        <input class="form-control" id="EndDate" name="EndDate" type="text" value="" />
        <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>

<label>Udostepnij dla:</label>
<div>
  <div class="i-checks checkbox-inline">
    <label>
      <input checked="True" class="choseOptionClass" id="private" name="Distribution" type="radio" value="privateDiv" />Prywatne</label>
  </div>

  <div class="i-checks checkbox-inline">
    <label>
      <input class="choseOptionClass" id="groups" name="Distribution" type="radio" value="groupsDiv" />Grupa</label>
  </div>

  <div class="i-checks checkbox-inline">
    <label>
      <input class="choseOptionClass" id="classes" name="Distribution" type="radio" value="classesDiv" />Przedmiot</label>
  </div>

  <div class="i-checks checkbox-inline">
    <label>
      <input class="choseOptionClass" id="all" name="Distribution" type="radio" value="allDiv" />Wszyscy</label>
  </div>
</div>
<div id="privateDiv" class="bla">private</div>
<div id="groupsDiv" class="bla">groups</div>
<div id="classesDiv" class="bla">
  <select class="chosen-select" id="mySelect" multiple="True" name="SelectedValues" tabindex="4"></select>
</div>

<div id="allDiv" class="bla">
  all
</div>

</div>
<div class="modal-footer">
  <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
  <button type="submit" class="btn btn-primary">Add event</button>
</div>
0
jrummell 6 Янв 2017 в 14:32

Работает нормально (без каких-либо изменений в вашем коде) убедитесь, что Jquery загружен на стороне клиента, и добавьте breakpoint, чтобы увидеть его запуск или нет.

NEW (попробуйте этот, также отредактированный в Code Snippet)

$(document).ready(function() {
    console.log('loaded'); 
    $(document).on("change", 'input[type="radio"]', function() {
        console.log('working'); // see it logs on console 
        var test = $(this).val();
        $(".bla").hide();
        $("#" + test).show();
    });
});

OLD

$('input[type="radio"]').on("change", function() {
  console.log('working'); // see it logs on console 
  debugger; // this will pause the code here
  var test = $(this).val();
  $(".bla").hide();
  $("#" + test).show();
});
$(document).ready(function() {

  $(document).on("change", 'input[type="radio"]', function() {
    console.log('working'); // see it logs on console 
    var test = $(this).val();
    $(".bla").hide();
    $("#" + test).show();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="/Calendar/Calendar/CreateEvent/" class="form-horizontal" method="post">
  <div class="modal-body">
    <label class="control-label">Title:</label>
    <div class="row">
      <div class='col-sm-12'>
        <div class="form-group">
          <input class="form-control" id="Title" name="Title" placeholder="Title here" type="text" value="" />
        </div>
      </div>
    </div>

    <label class="control-label">Date from:</label>
    <div class="row">
      <div class='col-sm-12'>
        <div class="form-group">
          <div class='input-group date' id='datestart'>
            <input class="form-control" id="StartDate" name="StartDate" type="text" value="" />
            <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <label class="control-label">EndDate:</label>
    <div class="row">
      <div class='col-sm-12'>
        <div class="form-group">
          <div class='input-group date' id='dateend'>
            <input class="form-control" id="EndDate" name="EndDate" type="text" value="" />
            <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <label>Udostępnij dla:</label>
    <div>
      <div class="i-checks checkbox-inline">
        <label>
          <input checked="True" class="choseOptionClass" id="private" name="Distribution" type="radio" value="privateDiv" />Prywatne</label>
      </div>

      <div class="i-checks checkbox-inline">
        <label>
          <input class="choseOptionClass" id="groups" name="Distribution" type="radio" value="groupsDiv" />Grupa</label>
      </div>

      <div class="i-checks checkbox-inline">
        <label>
          <input class="choseOptionClass" id="classes" name="Distribution" type="radio" value="classesDiv" />Przedmiot</label>
      </div>

      <div class="i-checks checkbox-inline">
        <label>
          <input class="choseOptionClass" id="all" name="Distribution" type="radio" value="allDiv" />Wszyscy</label>
      </div>
    </div>
    <div id="privateDiv" class="bla">private</div>
    <div id="groupsDiv" class="bla">groups</div>
    <div id="classesDiv" class="bla">
      <select class="chosen-select" id="mySelect" multiple="True" name="SelectedValues" tabindex="4"></select>
    </div>

    <div id="allDiv" class="bla">
      all
    </div>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
    <button type="submit" class="btn btn-primary">Add event</button>
  </div>
</form>
0
Ja9ad335h 6 Янв 2017 в 15:17