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

时间：2017-10-06 08:56:40

标签： javascript jquery

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

以下是代码：

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

默认情况下，它应显示当用户点击每月时的每小时基础金额，只应更改金额，就好像用户每月选择的金额应显示金额为$ 1999 /月 这是fiddle link。

3 个答案:

答案 0 :(得分：0)

我认为你正在寻找这个：

＆＃13;
＆＃13; 
$(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()
   }
});
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在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 show / hide显示每小时包/每月包，具体取决于按钮点击。 另外，请使用.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

答案 2 :(得分：0)

尝试以下代码

<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

相关问题
最新问题