Onclick文本更改，然後顯示圖像jQUERY

Question

我花了幾個小時在這個特定的代碼，但似乎不適合我。基本上我試圖onclick按鈕然後更改文本從簽署到簽署成功與條件如果簽到成功然後顯示圖像，否則設置圖像顯示：無。

你可以試着幫我解決這個問題，謝謝。

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

有一個多餘的右大布拉克et在你的代碼中。因此刪除它並用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>

你有多餘的}