删除自动内联样式

Question

我正在尝试隐藏 table 行，直到单击单选按钮为止。我试过 display:none; 但没用。因此，当我在我的开发人员工具中检查代码时，我看到 tr 有一个我从未添加过的 style="display: table-row; 而另一个 tr 的 none 有它。

我不确定如何删除它以便隐藏该行。

我的代码

$(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，现在它可以工作了。检查下面的代码：

    $(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>

Answer 2

您已经通过 css 将项目隐藏在开头 - 这非常有效。

但是你用：

显示它

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

送货费应用短暂出现然后隐藏的原因是因为上面的代码运行s 两次（因为你有 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 足够聪明，可以看到您正在针对 table 行调用 .show()，因此不会添加 display:block，而是添加 display:table-row。

这是因为您的 js 代码在 tr.

上调用了 .show()

删除自动内联样式

Removing automatic inline style

jquery

html

css

inline-styles