2016-10-03 6 views
2

クリックハンドラで特定の単語のテキストリンクを変更しようとしています。もう一度クリックすると、テキストリンクが元に戻ります。これどうやってするの?onclickでテキストを変更した後に戻る

<div class="checkLevel" id="damonkEYkEY"> 
    <span data-bind="css: safeLevelClass"> </span> 
    <a href="#" id="checkLevelBtn">签到</a> 
</div> 
$(document).ready(function(){ 
    $("#damonkEYkEY").click(function(){ 
     $(".checkLevel a").text('签到成功');    
    }); 
}); 
+0

@guradioこんにちは、あなたは私にこれを行うにはどのようにjQueryの道を示す気にしていますか?私はこれで新しいです。ありがとうございます –

+1

これは重複した質問かもしれません:http://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery – JDW

答えて

5

これはあなたがtext()メソッドに機能を提供し、現在のテキスト値を読み、それに応じて更新するために、三元表現を使用することができます達成するために。これを試してみてください:たぶんこのような

$(document).ready(function() { 
 
    $("#damonkEYkEY").click(function() { 
 
    $(".checkLevel a").text(function(i, t) { 
 
     return t == '签到' ? '签到成功' : '签到'; 
 
    }); 
 
    }); 
 
});
<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> 
 
</div>

+0

こんにちはロリー、あなたのコードは完璧です、おかげでverry多く –

+0

こんにちはロリーは可能ですテキストリンクが '签到成功'に変わったらカレンダーにショーを追加しますか? –

+0

はい、それは非常に幅広い要求です。 jQueryのdatepickerコントロールを見てみましょう。立ち往生した場合は、新しい質問をしてください。 –

0

$(document).ready(function(){ 
    var oldText = $(".checklevel a").text(); 
    $("#damonkEYkEY").click(function(){ 
     $(".checkLevel a").text('签到成功'); 

    }); 
    //Suppose back is an id 
    $("#back").click(function(){ 
     $(".checkLevel a").text('oldText); 
    }); 

}); 
0

あなたはこのように意味しますか?

$(document).ready(function(){ 
 
    $("#damonkEYkEY").click(function(){ 
 
     var ttext = $('a#checkLevelBtn').text();   
 
     $("a#checkLevelBtn").text(ttext == '签到成功' ? '签到' : '签到成功'); 
 
    }); 
 
});
<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> 
 
</div>

関連する問題