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

Question

Я пытаюсь скрыть строку таблицы, пока не нажата радиокнопка.Я пробовал 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.

Answer 1

У вас уже есть элемент скрытия в начале с помощью css - это прекрасно работает.

Но затем вы показываете его с помощью:

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

причина, по которой приложение с оплатой доставки появляется на короткое времяа затем скрывается, потому что приведенный выше код запускается дважды (так как у вас есть 2x 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.

Answer 2

ваш код правильный, но теперь я только удаляю 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>