时间戳

首页 > 解决方案 > 单击时不更改按钮的背景颜色

jquery - 单击时不更改按钮的背景颜色

问题描述

我的代码有一些问题。当我单击带有问题编号的按钮时，问题出现并且按钮变为红色。当我回答问题并提交问题并单击保存按钮应变为绿色。但它不起作用。如果我更改为“btn”类，而不是 id，整个按钮将变为绿色。复习标记也是如此。这是我的代码：

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
     $(document).ready(function(){            
       var qn;
       var roll='<?php echo $roll; ?>';
       var branch=roll.substring(6,8);  

       $(".btn").click(function(){ 
         qn=$(this).attr("id");   
         $(this).css('background-color', '#ff8787');     
         $.ajax({
           type:'POST',
           url:'test4.php',
           data:'br='+branch+'&rno='+roll+'&qst_id='+qn,                
           success:function(html) {                 
             $('#two').html(html); 
           }
         });
       });  

       $('#save').click(function(){
         $('#'+qn+'').css('background-color', '#6afc49');   
       }); 

       $('#review').click(function(){
         $('#'+qn+'').css('background-color', '#f259d4');   
       });   
     });
   </script>
</head>
  <body>
     <div id="content">
       <div id="two"></div>
         <div id="three">           
           <div id="qns">
             <?php
              $j=0; 
              for($i=1;$i<=20;$i++)
              {
                $j++;     
                echo"&nbsp&nbsp<button class='btn' id='$i' value='$i'>$i</button>&nbsp&nbsp";
                if($j==4)
                {
                 echo"<br></br>";
                 $j=0;
                }
              }  
            ?>         
        </div>      
     </div>
  </div>
      <div id="options"><button id="review">Mark for Review</button><button id="save">Save</button></div>
   </body>
 </html>

标签： jquery

解决方案

您需要将整个对象而不是 id 存储在qn变量中：

var qn;
var roll='<?php echo $roll; ?>';
var branch=roll.substring(6,8);  

 $(".btn").click(function(){ 
    qn=$(this);   

    $(this).css('background-color', '#ff8787');     
    $.ajax({
            type:'POST',
            url:'test4.php',
            data:'br='+branch+'&rno='+roll+'&qst_id='+qn.attr('id'),                
        success:function(html)
        {                    
          $('#two').html(html); 
        }
    });
});  

$('#save').click(function(){
    qn.css('background-color', '#6afc49');  
}); 

$('#review').click(function(){
    qn.css('background-color', '#f259d4');   
});

推荐阅读