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

Question

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