Clicking on a button unable to change the values using jquery

Question

I am having three different blocks it is hourly pricing, Monthly Pricing and Schedule a call.
By default it will show the details for hourly pricing.
When the user clicks on Monthly Pricing only the amount values should be changed.

Here is the code for that:

$('button').click(function() {
  $('button').removeClass('active');
  $(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>

By default, it should show hourly basis amount when user clicks on Monthly basis only the amount should be changed as if the user selected monthly the amount it should show the amount as $1999/month Here is the fiddle link for that.

@SilverSurfer when user clicks on monthly basis the amount should be changed for beginner from $12 to $1999,For pro it should be -$2499,for Ninja - $2999 — user8725518, Oct 06 '17 at 09:07
I required in this format if the user selects monthly basis only the amounts should be changed for all the three(Beginner,Pro and Ninja) and in the same again if the user selects hourly basis the amounts should be changed from monthly to hourly.In this format i required — user8725518, Oct 06 '17 at 09:10
@SilverSurfer no need to hide the prices,prices should be changed thats it — user8725518, Oct 06 '17 at 09:11
@user8725518, well I would say you got this code from somewhere else, perhaps, inspected the elements using DevTools. Anyways, good luck with finding a solution. — Adam Azad, Oct 06 '17 at 09:11

SilverSurfer · Answer 1 · 2017-10-06T09:31:28.670

I think you are looking for this:

$(document).ready(function(){
$("span.monthlypricing").hide()
$('button').click(function() {
   $('button').removeClass('active');
  $(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>

Ayush · Accepted Answer · 2017-10-06T09:33:50.263

Added class to spans in 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>

Use jquery show/hide to show the hourly package/monthly package depending on button click. Also, use .on instead of .click. For more information refer to Difference between .on('click') vs .click()

Jquery Code

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

score 0 · Answer 3 · answered Oct 06 '17 at 09:42

Try The following code

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

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

Clicking on a button unable to change the values using jquery

3 Answers3