點擊一個按鈕無法更改使用jQuery的值

Question

我有三個不同的塊它是小時定價，每月定價和安排一個電話。
默認情況下，它將顯示小時定價的詳細信息。
當用戶點擊每月定價時，只應更改金額值。

下面是該代碼：

$('button').click(function() { 
 
\t $('button').removeClass('active'); 
 
\t $(this).addClass('active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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"> 
 
    <h3>Beginner</h3> 
 
     
 
     
 
       <div style="transform:translateY(0rem);opacity:1;" class=""> 
 
        <span class="_dollar" >$</span> 
 
        <span class="amount" >12</span> 
 
        <span class="amount" >1999</span> 
 
        <span class="hour" >/ hour</span> 
 
        <span class="month" >/ month</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-md-4 pro"> 
 
    <h3 >Pro</h3> 
 
     <div style="transform:translateY(0rem);opacity:1;" class="" > 
 
        <span class="dollar" >$</span> 
 
        <span class="amount" >15</span> 
 
        <span class="amount" >2499</span> 
 
        <span class="hour" >/ hour</span> 
 
        <span class="month" >/ month</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-md-4 ninja"> 
 
    <h3 >Ninja</h3> 
 
     <div style="transform:translateY(0rem);opacity:1;" class="" > 
 
        <span class="dollar" >$</span> 
 
        <span class="amount" >18</span> 
 
        <span class="amount" >2999</span> 
 
        <span class="hour" >/ hour</span> 
 
        <span class="month" >/ month</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

默認情況下，它應該顯示當用戶點擊每月基礎上，只有量應改爲按小時計算量，如果用戶選擇每月應該顯示的金額爲1999美元/月 這是fiddle link。

Answer 1

添加類跨度在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> 

使用jQuery顯示/隱藏，顯示每小時包/每月套餐取決於按鈕點擊。 另外，使用.on而不是.click。欲瞭解更多信息，請參閱Difference between .on('click') vs .click()

jQuery代碼

$(document).ready(function() { 
    $(".monthly_rate, .month").hide(); 

    $('button').on('click', function() { 
    $('button').removeClass('active'); 
    $(this).addClass('active'); 

    if ($(this).prop("class") == "monthlypricing active") { 
     $(".monthly_rate, .month").show(); 
     $(".hourly_rate, .hour").hide(); 
    } else if ($(this).prop("class") == "hourlypricing active") { 
     $(".monthly_rate, .month").hide(); 
     $(".hourly_rate, .hour").show(); 
    } 

}); 

}); 

Working code fiddle link

Answer 2

我認爲你正在尋找這樣的：

$(document).ready(function(){ 
 
$("span.monthlypricing").hide() 
 
$('button').click(function() { 
 
    $('button').removeClass('active'); 
 
\t $(this).addClass('active'); 
 
    if($(this).hasClass("hourlypricing")){ 
 
     $("span.monthlypricing").hide() 
 
     $("span.hourlypricing").show() 
 
    } 
 
    if($(this).hasClass("monthlypricing")){ 
 
     $("span.hourlypricing").hide() 
 
     $("span.monthlypricing").show() 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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 hourlypricing" data-reactid="21">12</span> 
 
        <span class="amount monthlypricing" data-reactid="21">1999</span> 
 
        <span class="hour hourlypricing" data-reactid="23">/ hour</span> 
 
        <span class="month monthlypricing" 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 hourlypricing" data-reactid="21">15</span> 
 
        <span class="amount monthlypricing" data-reactid="21">2499</span> 
 
        <span class="hour hourlypricing" data-reactid="23">/ hour</span> 
 
        <span class="month monthlypricing" 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 hourlypricing" data-reactid="21">18</span> 
 
        <span class="amount monthlypricing" data-reactid="21">2999</span> 
 
        <span class="hour hourlypricing" data-reactid="23">/ hour</span> 
 
        <span class="month monthlypricing" data-reactid="23">/ month</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

試試下面的代碼

<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> 

JS代碼在這裏

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"); 
    }); 
} 

Click here to see jsFiddle