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，现在它可以正常工作。请检查以下代码：

    $(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');

送货费用应用短暂出现然后隐藏的原因是因为上述代码运行两次两次（因为您有2x input[type='radio']）-首次交付，因此调用{{1 }}然后进行收集，因此调用.show()。

jQuery将动画排入队列，其中包括.hide和.show。您可以使用hide，如

.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>-这是一条红色鲱鱼。 jQuery非常聪明，足以看出您正在针对表行调用display:table-row，因此与其添加.show()，不如添加display:block。

之所以会这样，是因为您的js代码在该display:table-row上调用了.show()。

删除自动内联样式

2 个答案: