单击文本更改，然后显示图像jQUERY

Question

我花了几个小时在这个特定的代码上，但似乎不适合我。基本上，我试图单击按钮，然后将文本从签到更改为签到成功，条件是: if签到成功，然后显示图像，否则将图像设置为display:none。

你能帮我处理一下这段代码吗谢谢。

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

Answer 1

在您的代码中有一个多余的闭包卷曲括号。因此，删除它并将if($(".checkLevel a").text('签到成功')){替换为if($(".checkLevel a").text()=='签到成功'){。

请检查下面的片段。

​

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

​

Answer 2

​

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

​

你有额外的}