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>

您有额外的}

Onclick文本更改然后显示图像jQUERY

2 个答案: