2

だから私はこのテーブルを持っています：

レンダリングされたアップグレード テーブル

ユーザーが現在使用しているプラ​​ンを強調表示する JavaScript コードがいくつかあります。これは、アップグレードまたはダウングレードすると変更されます。

アップグレード ボタンをクリックしてページをレンダリングすると、以下に示すような望ましくない副作用が発生します。

アップグレード表

border-top他のすべての<td>タグにエクストラを適用するかのようです。ページを更新すると、問題なく動作するようになりました。border-rightand属性を追加しない場合にも混乱を招くためborder-left、「アップグレード」または「ダウングレード」ボタンを押すと正常に機能します。

左右のフチなしグレードアップテーブル

Firefox と Safari でもテストしましたが、Firefox は正常にレンダリングされますが、Safari ではまだ望ましくない副作用が発生しています。

これがなぜなのか誰か知っていますか？

$('#' + params['current_plan']).addClass('current_pricing_plan');`
$(".current_pricing_plan button").prop("disabled", true);`

.current_pricing_plan {
border-bottom: 2px solid #00a6cd!important;
border-left: 2px solid #00a6cd;
border-right: 2px solid #00a6cd;
border-top: 2px solid #00a6cd!important;
background-color: #f4f4f4;
}

コードの最初のブロックは JS で、2 番目は CSS です。Rails を使用しているので<tr>、html.erb ファイル内の の 1 つの例を次に示します。

<tr id="750" class="current-pricing-plan">
  <td><strong>£25</strong><span class="smalltxt"> /month</span></td>
  <td><strong>750</strong><span class="smalltxt"> mins&nbsp;included</span></td>
  <td><strong>4p</strong><span class="smalltxt"> /min&nbsp;thereafter</span></td>
  <td class="last-col">
    <button class="btn smallbtn confirm_opener_750-25">
    <span class="hidetextmobile"></span>
    <% if @account.billing_plan.inclusive_minutes > 750 %>
      <span class="your-plan">Downgrade</span><span class="your-plan-none">Your Plan</span>
    <% else %>
       <span class="your-plan">Upgrade</span><span class="your-plan-none">Your Plan</span>
    <% end %>
  </button>
 </td>
</tr>
4

1 に答える 1