Блог

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

Вот мое мнение:

  @for (int x = 0; x < Model.Phones.Count; x  )
 {
    @Html.EditorFor(m => m.Phones[x], "_PhonePartial")
 }
  

Вот код, который показывает телефон частично при нажатии кнопки, который скрывает их все, кроме первого:

  $('.phone-wrapper').hide();
 $('.phone-wrapper').first().show();
 var count = 1;
 $('.add-phone-wrapper').on('click', function () {
    $('.phone-wrapper:eq('  count ')').show();
    count  ;
 });
  

Вот частичное представление телефона:

   <div class="phone-wrapper"> 
     <div class="col-md-1 domestic-phone">
       @Html.TextBoxFor(m => m.AreaCode)
     </div>

   <div class="col-md-1 domestic-phone">
      @Html.TextBoxFor(m => m.code2)
   </div>

   <div class="col-md-1 domestic-phone">
     @Html.TextBoxFor(m => m.code3)
   </div>

   <div class="col-md-3 international-phone">
     @Html.TextBoxFor(m => m.Internationalbox)
   </div>  
    <div class="col-md-3">
       <select class="form-control phone-selection">
         <option selected="selected" value="domestic">Domestic</option>
         <option value="international">International</option>
      </select>
    </div>
  </div>
  

Javascript для скрытия и отображения текстовых полей:

 $(function () {

  $(".phone-selection").on("change", function () {
    var $this = $(this),
        $closeDiv = $this.closest(".phone-section");

    if ($this.val().toLowerCase() === "domestic") {

        $closeDiv.find(".domestic-phone").show();
        $closeDiv.find(".international-phone").hide();

    } else {

        $closeDiv.find(".domestic-phone").hide();
        $closeDiv.find(".international-phone").show();
    }

   });
 });
  

Любая помощь будет принята с благодарностью, спасибо!

Попробуйте это

  $(function () {

 $(".phone-selection").on("change", function () {
var $this = $(this),
    $closeDiv = $this.closest(".phone-section");

 if ($this.val().toLowerCase() === "domestic") {
    $(".domestic-phone").each(function () {
                $(this).show();
            });       
    $(".international-phone").each(function () {
                $(this).hide();
            }); 
} else {

     $(".domestic-phone").each(function () {
                $(this).hide();
            });       
    $(".international-phone").each(function () {
                $(this).show();
            }); 
}

 });
 });