CODEWITHSUNDEEP
javascriptjqueryhtml
Morgan Ng
Morgan Ng

Reputation: 813

Onclick text change then display image jQUERY

I spent few hours in this particular code but seems not working for me . Basically i was trying to onclick the button then change text from 签到 to 签到成功 with the condition of if 签到成功 then display image else set the image to display:none .

Can you try to help me with this code , Thanks you .

HTML : 

<div class="checkLevel" id="damonkEYkEY">
    <span data-bind="css: safeLevelClass"> </span>
    <a href="#" id="checkLevelBtn">签到</a> 
    <img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>

jQUERY : 

$(document).ready(function() {
    $("#damonkEYkEY").click(function(e) {
        e.preventDefault();
        $(".checkLevel a").text(function(i, t) {
          return t == '签到' ? '签到成功' : '签到';

        });
        if($(".checkLevel a").text('签到成功')){
         $(".calendarshow").css("display", "block");}
        else{
         $(".calendarshow").css("display", "none");}
      }
  });
});

CSS : 

.calendarshow { 
    display: inline-block;
    bottom: -180px;
    position: absolute;
    left: 118px;
}

Upvotes: 1

Views: 318

Answers (2)

guradio
guradio

Reputation: 15555

 $(document).ready(function() {
   $("#damonkEYkEY").click(function(e) {
     e.preventDefault();
     $(".checkLevel a").text(function(i, t) {
       return t == '签到' ? '签到成功' : '签到';

     });

     if ($(".checkLevel a").text() == '签到成功') {
       $(".calendarshow").css("display", "block");
     } else {
       $(".calendarshow").css("display", "none");
     }

   });
 });
.calendarshow {
  display: inline-block;
  bottom: -180px;
  position: absolute;
  left: 118px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkLevel" id="damonkEYkEY">
  <span data-bind="css: safeLevelClass"> </span>
  <a href="#" id="checkLevelBtn">签到</a> 
  <img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>

You have extra }

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5246

There was a redundant closing curly bracket in your code. So removed it and replace if($(".checkLevel a").text('签到成功')){ with if($(".checkLevel a").text()=='签到成功'){.

Please check below snippet.

$(document).ready(function() {
  $("#damonkEYkEY").click(function(e) {
    e.preventDefault();
    $(".checkLevel a").text(function(i, t) {
      return t == '签到' ? '签到成功' : '签到';

    });

    if($(".checkLevel a").text()=='签到成功'){
      $(".calendarshow").css("display", "block");}
    else{
      $(".calendarshow").css("display", "none");}
  });
}); 
.calendarshow { 
  display: inline-block;
  bottom: -180px;
  position: absolute;
  left: 118px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkLevel" id="damonkEYkEY">
  <span data-bind="css: safeLevelClass"> </span>
  <a href="#" id="checkLevelBtn">签到</a> 
  <img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>

Upvotes: 1

Related Questions