Javascript 单击按钮无法使用jquery更改值

我有三个不同的区块，分别是小时定价、月定价和安排通话。
默认情况下，它将显示每小时定价的详细信息。
当用户单击每月定价时，仅应更改金额值

以下是代码：

$（“按钮”）。单击（函数（）{
$（'button'）。removeClass（'active'）；
$（this.addClass（'active'）；
});

每小时收费
或
月价
初学者
$
12
1999
/时辰
/月
赞成
$
15
2499
/时辰
/月
忍者
$
18
2999
/时辰
/月
我想您正在寻找：


$（文档）.ready（函数（）{
$（“span.monthlypricing”）.hide（）
$（“按钮”）。单击（函数（）{
$（'button'）。removeClass（'active'）；
$（this.addClass（'active'）；
if（$（this）.hasClass（“hourlypricing”））{
$（“span.monthlypricing”）.hide（）
$（“span.hourlypricing”）.show（）
}
if（$（this）.hasClass（“月定价”））{
$（“span.hourlypricing”）.hide（）
$（“跨月定价”）.show（）
}
});
});

每小时收费
或
月价
初学者
$
12
1999
/时辰
/月
赞成
$
15
2499
/时辰
/月
忍者
$
18
2999
/时辰
/月
在HTML中为跨度添加了类

<div class="plan-card__body">
    <div class="_196p" data-reactid="18">
        <div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
            <span class="_dollar" data-reactid="20">$</span>
            <span class="amount hourly_rate" data-reactid="21">12</span>
            <span class="amount monthly_rate" data-reactid="21" >1999</span>
            <span class="hour" data-reactid="23">/ hour</span>
           <span class="month" data-reactid="23">/ month</span>
        </div>
    </div>
</div>

请尝试以下代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hourly">                                
    <button class="hourlypricing active">Hourly Pricing</button>
    <span class="FyfR" data-reactid="5">or</span>
    <button class="monthlypricing">Monthly Pricing</button>
</div>

<div class="col-md-4 beginner">
  <div class="plan-card__card-wrapper">
    <header class="plan-card__header">
        <h3 class="plan-card__name">Beginner</h3>
    </header>
    <div class="plan-card__body">
        <div class="_196p" data-reactid="18">
            <div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
                <span class="_dollar" data-reactid="20">$</span>
                <span class="amount hour" data-reactid="21">12</span>
          <span class="amount month" data-reactid="21">1999</span>
                <span class="hour" data-reactid="23">/ hour</span>
          <span class="month " data-reactid="23">/ month</span>
            </div>
        </div>
    </div>                              
  </div>
</div>
<div class="col-md-4 pro">
  <div class="plan-card__card-wrapper">
    <header class="plan-card__header">
        <h3 class="plan-card__name">Pro</h3>
    </header>   
      <div class="plan-card__body">
        <div class="_196p" data-reactid="18">
            <div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
                <span class="dollar" data-reactid="20">$</span>
                <span class="amount hour" data-reactid="21">15</span>
            <span class="amount month" data-reactid="21">2499</span>
                <span class="hour" data-reactid="23">/ hour</span>
            <span class="month  " data-reactid="23">/ month</span>
            </div>
        </div>
    </div>                                          
  </div>
</div>  
<div class="col-md-4 ninja">
  <div class="plan-card__card-wrapper">
    <header class="plan-card__header">
        <h3 class="plan-card__name">Ninja</h3>
    </header>
    <div class="plan-card__body">
      <div class="_196p" data-reactid="18">
        <div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
          <span class="dollar" data-reactid="20">$</span>
          <span class="amount hour" data-reactid="21">18</span>
          <span class="amount month" data-reactid="21">2999</span>
          <span class="hour" data-reactid="23">/ hour</span> 
          <span class="month" data-reactid="23">/ month</span>
        </div>
      </div>
    </div>                                  
  </div>
</div>

您正在使用react吗？此代码看起来像渲染的HTML@AdamAzad我没有使用反应器你的目标是什么？不是clear@SilverSurfer当用户每月点击时，新手的点击量应该从$12改为$1999，专业版的点击量应该是$2499，忍者版的点击量应该是$2999，你是说隐藏和显示价格取决于点击的按钮？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hourly">                                
    <button class="hourlypricing active">Hourly Pricing</button>
    <span class="FyfR" data-reactid="5">or</span>
    <button class="monthlypricing">Monthly Pricing</button>
</div>

<div class="col-md-4 beginner">
  <div class="plan-card__card-wrapper">
    <header class="plan-card__header">
        <h3 class="plan-card__name">Beginner</h3>
    </header>
    <div class="plan-card__body">
        <div class="_196p" data-reactid="18">
            <div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
                <span class="_dollar" data-reactid="20">$</span>
                <span class="amount hour" data-reactid="21">12</span>
          <span class="amount month" data-reactid="21">1999</span>
                <span class="hour" data-reactid="23">/ hour</span>
          <span class="month " data-reactid="23">/ month</span>
            </div>
        </div>
    </div>                              
  </div>
</div>
<div class="col-md-4 pro">
  <div class="plan-card__card-wrapper">
    <header class="plan-card__header">
        <h3 class="plan-card__name">Pro</h3>
    </header>   
      <div class="plan-card__body">
        <div class="_196p" data-reactid="18">
            <div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
                <span class="dollar" data-reactid="20">$</span>
                <span class="amount hour" data-reactid="21">15</span>
            <span class="amount month" data-reactid="21">2499</span>
                <span class="hour" data-reactid="23">/ hour</span>
            <span class="month  " data-reactid="23">/ month</span>
            </div>
        </div>
    </div>                                          
  </div>
</div>  
<div class="col-md-4 ninja">
  <div class="plan-card__card-wrapper">
    <header class="plan-card__header">
        <h3 class="plan-card__name">Ninja</h3>
    </header>
    <div class="plan-card__body">
      <div class="_196p" data-reactid="18">
        <div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
          <span class="dollar" data-reactid="20">$</span>
          <span class="amount hour" data-reactid="21">18</span>
          <span class="amount month" data-reactid="21">2999</span>
          <span class="hour" data-reactid="23">/ hour</span> 
          <span class="month" data-reactid="23">/ month</span>
        </div>
      </div>
    </div>                                  
  </div>
</div>

if($(".hourly").find("active").html() == "Monthly Pricing"){
        hideHours();
}else {
     hideMonth();
}
$('button').click(function() {
        $('button').removeClass('active');
        $(this).addClass('active');
      if($(this).html() == "Monthly Pricing"){
        hideHours();
      }else {
        hideMonth();
      }
     });

 function hideMonth(){
        $("span.hour").each(function(e){
            $(this).css("display","inline");
        });
        $("span.month").each(function(e){
            $(this).css("display","none");
        });
 }

 function hideHours(){
  $("span.hour").each(function(e){
    $(this).css("display","none");
  });
   $("span.month").each(function(e){
     $(this).css("display","inline");
   });
 }