Удаление автоматического встроенного стиля

Я пытаюсь скрыть строку таблицы, пока не нажата радиокнопка. я пробовал display:none; но это не сработало. Поэтому, когда я проверил код в моих инструментах разработчика, я увидел, что tr имеет style="display: table-row; который я никогда не добавлял, и ни у одного другого tr этого нет.

Я не уверен, как удалить его, чтобы скрыть этот ряд.

Мой код

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "collection") {
      $(".deliver-fee").hide('slow');
    }
    if ($(this).attr("value") == "delivery") {
      $(".deliver-fee").show('slow');
    }
  });
  $('input[type="radio"]').trigger('click');
});
.deliver-fee {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delivery-option">
  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="delivery" value="delivery">
    <label for="delivery" class="form-check-label">
    Delivery
   </label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="collection" value="collection">
    <label for="collection" class="form-check-label">
    Collection
   </label>
  </div>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Code</th>
      <th scope="col">Quantity</th>
      <th scope="col">Unit Price</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4">
        <div class="float-right">
          Sub Total
        </div>
      </th>
      <td>R{{ $totalPrice }}</td>
    </tr>

    <tr class="deliver-fee">
      <th colspan="4">
        <div class="float-right">
          Delivery Fee
        </div>
      </th>
      <td>R{{ $delivery }}</td>
    </tr>
  </tbody>
</table>

Так что должно произойти, это .delivery-fee строка автоматически скрывается, когда страница загружена, и как только пользователь нажал на доставку, .delivery-fee строка показана.

Источник

2 ответа

Решение

У вас уже есть пункт скрыть в начале через CSS - это работает отлично.

Но тогда вы показываете это с:

$('input[type="radio"]').trigger('click');

Причина, по которой приложение с платой за доставку появляется на короткое время, а затем скрывается, заключается в том, что приведенный выше код запускается дважды input[type='radio']) - первый раз за доставку, поэтому звонит .show() тогда для сбора так называет hide,

jQuery ставит в очередь анимацию, которая включает в себя.hide и.show. Вы могли бы использовать .finish(), как в

  $(".deliver-fee").finish().hide('slow');

но это просто скрыло бы проблему.

Самый простой вариант - просто удалить эту строку и подождать, пока пользователь нажмет. Если вам нужна плата за доставку, указанная на основе предварительно загруженной информации, запустите ее только для :checked вещь

$('input[type="radio"]:checked').trigger('click');

Обновленный фрагмент:

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "collection") {
      $(".deliver-fee").hide('slow');
    }
    if ($(this).attr("value") == "delivery") {
      $(".deliver-fee").show('slow');
    }
  });
  // Don't show+hide delivery fee
  //$('input[type="radio"]').trigger('click');
});
.deliver-fee {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delivery-option">
  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="delivery" value="delivery">
    <label for="delivery" class="form-check-label">
        Delivery
    </label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="collection" value="collection">
    <label for="collection" class="form-check-label">
        Collection
    </label>
  </div>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Code</th>
      <th scope="col">Quantity</th>
      <th scope="col">Unit Price</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4">
        <div class="float-right">
          Sub Total
        </div>
      </th>
      <td>R{{ $totalPrice }}</td>
    </tr>

    <tr class="deliver-fee">
      <th colspan="4">
        <div class="float-right">
          Delivery Fee
        </div>
      </th>
      <td>R{{ $delivery }}</td>
    </tr>
  </tbody>
</table>

относительно display:table-row - это красная сельдь. JQuery достаточно умен, чтобы увидеть, что вы звоните .show() против строки таблицы, а не добавлять display:block это добавляет display:table-row,

Это там, потому что ваш код JS вызывает .show() на что tr,

Источник

Ваш код правильный, но теперь я только удаляю css который вы добавляете и теперь он работает.. проверьте код ниже:

    $(document).ready(function(){

        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="collection"){
                $(".deliver-fee").hide('slow');
            }

            if($(this).attr("value")=="delivery"){
                $(".deliver-fee").show('slow');

            }        
        });

        $('input[type="radio"]').trigger('click');
    });
<div class="delivery-option">
    <div class="form-check">
        <input type="radio" class="form-check-input" name="delivery-option" id="delivery" value="delivery">
        <label for="delivery" class="form-check-label">
            Delivery
        </label>
    </div>

    <div class="form-check">
        <input type="radio" class="form-check-input" name="delivery-option" id="collection" value="collection">
        <label for="collection" class="form-check-label">
            Collection
        </label>
    </div>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Code</th>
      <th scope="col">Quantity</th>
      <th scope="col">Unit Price</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4">
        <div class="float-right">
            Sub Total       
        </div>
      </th>
      <td>R{{ $totalPrice }}</td>
    </tr>

    <tr class="deliver-fee">
      <th colspan="4">
        <div class="float-right">
            Delivery Fee
        </div>
      </th>
      <td>R{{ $delivery }}</td>
    </tr>
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>

Источник
Другие вопросы по тегам