我试图使用javascript隐藏和显示带有单选按钮的部分模板

时间：2016-07-03 01:47:09

标签： javascript jquery html

我有一个客户想要提供4种不同的会员类型，并允许人们使用信用卡或PayPal为每个会员付款。我为每种类型的会员和付款方式创建了捐赠页面。我必须这样做，用他们的会员类型标记每个新成员并分配跟踪代码。

我为每种会员类型创建了一个单选按钮，当用户点击某个特定按钮时，会显示相应的捐款表单。

html是：

#include <iostream>
#include <iomanip>
#include <memory>
#include <chrono>
#include "util.h"
#include "mkl.h"

double vtmv_blas(double* x, double* A, double* y, const unsigned n)
{
        double temp[n];
        cblas_dgemv(CblasRowMajor, CblasNoTrans, n, n, 1.0, A, n, y, 1, 0.0, temp, 1); 
        return cblas_ddot(n, temp, 1, x, 1); 
}

double vtmv_non_blas(double* x, double* A, double* y, const unsigned n)
{
        double r = 0;
        for (unsigned i = 0; i < n; ++i)
        {
                for (unsigned j = 0; j < n; ++j)
                {
                        r += x[i] * A[i*n + j] * y[j];
                }
        }
        return r;
}

int main()
{
        std::cout << std::fixed;
        std::cout << std::setprecision(2);
        constexpr unsigned N = 10000;
        rng r;

        std::unique_ptr<double[]> A = r.generate_square_matrix(N);
        std::unique_ptr<double[]> x = r.generate_vector(N);
        std::unique_ptr<double[]> y = r.generate_vector(N);

        auto start = std::chrono::system_clock::now();
        const double prod = vtmv_blas(x.get(), A.get(), y.get(), N); 
        auto end = std::chrono::system_clock::now();
        auto duration = std::chrono::duration_cast<std::chrono::milliseconds>(
                end - start);

        std::cout << "Result: " << prod << std::endl;
        std::cout << "Time (ms): " << duration.count() << std::endl;

javascript是：

     <div class="row">
 <div class="col-md-3">
   <div class="member-button">
   <label><input type="radio" name="member" value="weekly"> <h3>Weekly</h3></label>
     <h4>$1.00 per week</h4>
    </div>
    </div>
     <div class="col-md-3">
       <div class="member-button">
         <label><input type="radio" name="member" value="monthly"> <h3>Monthly</h3></label>  
         <h4>$19.95 per month</h4>
    </div>
    </div>
     <div class="col-md-3">
       <div class="member-button">
         <label><input type="radio" name="member" value="annual"> <h3>Annual</h3></label> 
         <h4>$25.00 per year</h4>
       </div>
    </div>
     <div class="col-md-3">
       <div class="member-button">
         <label><input type="radio" name="member" value="lifetime"> <h3>Lifetime</h3></label> 
         <h4>$999.00 for life</h4>
       </div> 
  </div>
  </div>

  <div class="row">   
    <div class="weekly box">
    <div class="col-md-6">
      <div class="donate-wrap-left">
      {% subpage "weekly" with "donation_partial" %}
    </div>
    </div>
    <div class="col-md-6">
      <div class="donate-wrap-right">
      {% subpage "weekly_paypal" with "donation_partial" %}
    </div>
    </div>
  </div>
    <div class="monthly box">
    <div class="row">

    <div class="col-md-6">
      <div class="donate-wrap-left">
      {% subpage "monthly" with "donation_partial" %}
    </div>
    </div>
    <div class="col-md-6">
      <div class="donate-wrap-right">
      {% subpage "monthly_paypal" with "donation_partial" %}
    </div>
    </div>
  </div>
  <div class="annual box">
      <div class="row">
    <div class="col-md-6">
      <div class="donate-wrap-left">
      {% subpage "one_time" with "donation_partial" %}
    </div>
    </div>
    <div class="col-md-6">
      <div class="donate-wrap-right">
      {% subpage "one_time_paypal" with "donation_partial" %}
    </div>
    </div>
  </div>

      <div class="row">
        <div id="lifetime box">
    <div class="col-md-6">
      <div class="donate-wrap-left">
      {% subpage "one_time_999" with "donation_partial" %}
    </div>
    </div>
    <div class="col-md-6">
      <div class="donate-wrap-right">
      {% subpage "lifetime_paypal" with "donation_partial" %}
    </div>
    </div>
  </div>
</div>

该脚本基本上有效，但我遇到了2个问题。首先，即使在页面加载时没有选中任何单选按钮，所有捐赠表单都是可见的。其次，当我点击每周，每月或每年时，终身捐赠表格仍然可见。

理想情况下，我希望默认选中“每周”单选按钮，只显示该表单，显然我想知道如何隐藏终身表单，除非单击该单选按钮。

2 个答案:

答案 0 :(得分：0)

首先在默认checked

中添加input属性 
    <input type="radio" value="weekly" name="member" checked="checked" />

然后遵循DRY原则，不要重复自己..

创建功能，根据类型处理隐藏和显示

function showOnlyForType(type) {
   var className = "." + type;
   $(".box").not(className).hide();
   $(className).show();
}

你已经看到了，你的生活会变得更轻松吗？

如果不是，这里有一个例子：

$(document).ready(function(){

    // call it to show only weekly type when ready
    showOnlyForType('weekly');

    // handle event..
    $('input[type="radio"]').click(function(){
      showOnlyForType(this.val())
    });
});

答案 1 :(得分：0)

我相信你在HTML代码本身有一些错误，所有内容都是正确嵌套的，就像你想要的那样......？这是我的方法：

＆＃13;
＆＃13; 
function setDonation(radio){
  var donations = ['weeklybox','monthlybox','annualbox','lifetimebox'];
  for(var i=0;i<donations.length;i++)
   document.getElementById(donations[i]).style.display = 'none';
  document.getElementById(radio.value+'box').style.display = 'block';
 }
＆＃13; 
<html>
 <head>
 </head>
 <body>
 <div class="row">
 <div class="col-md-3">
   <div class="member-button">
   <label><input type="radio" name="member" value="weekly" checked onclick="setDonation(this);"> <h3>Weekly</h3></label>
     <h4>$1.00 per week</h4>
    </div>
    </div>
     <div class="col-md-3">
       <div class="member-button">
         <label><input type="radio" name="member" value="monthly" onclick="setDonation(this);"> <h3>Monthly</h3></label>  
         <h4>$19.95 per month</h4>
    </div>
    </div>
     <div class="col-md-3">
       <div class="member-button">
         <label><input type="radio" name="member" value="annual" onclick="setDonation(this);"> <h3>Annual</h3></label> 
         <h4>$25.00 per year</h4>
       </div>
    </div>
     <div class="col-md-3">
       <div class="member-button">
         <label><input type="radio" name="member" value="lifetime" onclick="setDonation(this);"> <h3>Lifetime</h3></label> 
         <h4>$999.00 for life</h4>
       </div> 
  </div>
  </div>

<div class="row">
 <div class="weekly box" id="weeklybox">
  <div class="col-md-6">
   <div class="donate-wrap-left">
    {% subpage "weekly" with "donation_partial" %}
   </div>
  </div>
  <div class="col-md-6">
   <div class="donate-wrap-right">
    {% subpage "weekly_paypal" with "donation_partial" %}
   </div>
  </div>
 </div>
 <div class="monthly box" id="monthlybox" style="display:none;">
  <div class="col-md-6">
   <div class="donate-wrap-left">
    {% subpage "monthly" with "donation_partial" %}
   </div>
  </div>
  <div class="col-md-6">
   <div class="donate-wrap-right">
    {% subpage "monthly_paypal" with "donation_partial" %}
   </div>
  </div>
 </div>  
 <div class="annual box" id="annualbox" style="display:none;">
  <div class="col-md-6">
   <div class="donate-wrap-left">
    {% subpage "one_time" with "donation_partial" %}
   </div>
  </div>
  <div class="col-md-6">
   <div class="donate-wrap-right">
    {% subpage "one_time_paypal" with "donation_partial" %}
   </div>
  </div>
 </div>
 <div class="lifetime box" id="lifetimebox" style="display:none;">
  <div class="col-md-6">
   <div class="donate-wrap-left">
    {% subpage "one_time_999" with "donation_partial" %}
   </div>
  </div>
  <div class="col-md-6">
   <div class="donate-wrap-right">
    {% subpage "lifetime_paypal" with "donation_partial" %}
   </div>
  </div>
 </div>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

要点：

向所有捐款部分添加ID，并使用display：none隐藏除第一部分以外的所有部分。其余的由setDonation（）函数完成 - 我也直接用HTML而不是代码将这个函数分配给那些无线电，可能是个人品味的问题 - 但是我仍然会推荐这个，让你的一切更干净，更容易阅读一段时间后返回代码。

相关问题
最新问题