单击文本修改,然后显示图像jQUERY

时间:2022-08-11 21:22:21

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 .

我在这段代码中花了几个小时,但似乎对我不起作用。基本上我是试图从签onclick按钮然后改变文本到要签到成功的条件如果签到成功其他然后显示图像设置图像显示:没有。

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

你能帮我弄一下这个代码吗,谢谢。

HTML :

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 :

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 :

CSS:

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

2 个解决方案

#1


1  

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

代码中有一个冗余的右括号。因此删除它并替换if($(")checkLevel”)。text(“签到成功”)){ if($("。checkLevel”)。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>

#2


0  

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

你有额外的}

#1


1  

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

代码中有一个冗余的右括号。因此删除它并替换if($(")checkLevel”)。text(“签到成功”)){ if($("。checkLevel”)。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>

#2


0  

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

你有额外的}