Question

基本上，我有一个定价表，我试图在选择年度时更改价格。

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<span class="price"></span>

我试图这样做，当切换开关时，它会显示每月价格，当它被取消时，它将显示年度价格。我如何在jQuery中执行此操作？我对jQuery非常陌生，所以请原谅我的无知。

Answer 1

希望这就是你要找的东西。

＆＃13;

var month = [1, 2, 3];
var year = [100, 200, 300];
var prices = document.getElementsByClassName('price');
var tempPrice;

//Run price change funtion tu set up prices
priceChange();
//Listener to switch change
$('.switch input').change(priceChange);


function priceChange() {
  //Loop for pirces
  for (i = 0; i < prices.length; i++) {
    //Validator if checked for year values
    if (this.checked) {
      tempPrice = year[i];
    } else { //Else month values
      tempPrice = month[i];
    }
    prices[i].innerHTML = tempPrice;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="desktop">
  <tr>
    <th id="no-outline"><label class="switch">
  <input type="checkbox">
  <span class="slider round">
                    </span>
</label>
    </th>
    <th class="plan-title">Micro
      <p id="price">$<span class="price"></span> per month</p><a class="button" href="/signup">Request a demo</a></th>
    <th class="plan-title">Venture
      <p id="price">$<span class="price"></span> per month</p><a class="button" href="/signup">Request a demo</a></th>
    <th class="plan-title">Established
      <p id="price">$<span class="price"></span> per month</p><a class="button" href="/signup">Request a demo</a></th>
  </tr>
  <tr>
    <td class="feature-section" id="first">Online presense &amp; branding</td>
    <td class="feature-section"></td>
    <td class="feature-section"></td>
    <td class="feature-section" id="last"></td>
  </tr>
  <tr>
    <td id="first">Dedicated advisor</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td id="first">Custom website design</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>

  <tr>
    <td id="first">Mobile-ready website</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td id="first">Custom domain</td>
    <td>Varies</td>
    <td>Varies</td>
    <td>Free</td>
  </tr>
  <tr>
    <td id="first">Logo branding</td>
    <td>-</td>
    <td>-</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td id="first">Managed social media</td>
    <td>-</td>
    <td>-</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td class="feature-section" id="first">Ecommerce</td>
    <td class="feature-section"></td>
    <td class="feature-section"></td>
    <td class="feature-section" id="last"></td>
  </tr>
  <tr>
    <td>Ecommerce support</td>
    <td>-</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Product listings</td>
    <td>-</td>
    <td>Unlimited</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>SSL certificate included</td>
    <td>-</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Quickbooks compatible</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td class="feature-section" id="first">Security</td>
    <td class="feature-section"></td>
    <td class="feature-section"></td>
    <td class="feature-section" id="last"></td>
  </tr>
  <tr>
    <td>Daily backups</td>
    <td>Yes, saved for 7 days</td>
    <td>Yes, saved for 30 days</td>
    <td>Yes, saved for 90 days</td>
  </tr>
  <tr>
    <td>Data encryption</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Fraud detection</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Two-factor authentication</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Advisor background check</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td class="feature-section" id="first">Data</td>
    <td class="feature-section"></td>
    <td class="feature-section"></td>
    <td class="feature-section" id="last"></td>
  </tr>
  <tr>
    <td>Disk space</td>
    <td>5GB</td>
    <td>25GB</td>
    <td>100GB</td>
  </tr>
  <tr>
    <td>Manage customer help tickets</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Chat with potential clients</td>
    <td>Up to 15 people per month</td>
    <td>Up to 150 people per month</td>
    <td>Up to 2,500 people per month</td>
  </tr>
  <tr>
    <td>Real-time user tracking</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Website analytics</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
</table>

＆＃13;

Answer 2

＆＃13;

var monthly="£12.00";
var yearly="£130.00";
$("label.switch input[type=checkbox]").change(function() {
    $(".price").text(this.checked?yearly:monthly);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
  <input type="checkbox" checked>Yearly
  <span class="slider round"></span>
</label><br>

<span class="price">£130.00</span>

＆＃13;

像这样的东西

如何使用切换开关更改文本？

2 个答案: