リフレッシュせずにすばらしいクラスのリアルタイムを変更する

Question

値が入力値と等しい場合、リロードやリフレッシュなしでリアルタイムでクラスを置き換える方法

例：

<input id="status_action" name="status_action" value="1" type="text" readonly="readonly"> 

<a href="javascript:void(0)" id="status_alert" class="btn btn-success btn-xs"><i class="fa fa-envelope-o" aria-hidden="true"></i> unread </a> 

<script> 
$(document).ready(function(){ 
if ($('#status_action').val() == 0) { 
    $('#status_alert').find('i').addClass('fa fa-envelope-open-o').removeClass('fa fa-envelope-o'); 
} 
}) 
</script> 

Answer 1

あなただけの必要なクラスを切り替えることtoggleClassを使用し、その後、あなたのinputにinputイベントにフックする必要があります。

$('#status_action').on('input', function(){ 
    // get the number value, or 0 from the input 
    var value = parseInt($(this).val(), 10) || 0; 
    if(value === 0){ // if our value is strictly equal to 0 
     // find all closed envelopes, and toggle their classes to open 
     $('#status_alert .fa-envelope-o').toggleClass('fa-envelope-o fa-envelope-open-o'); 
    }else{ // otherwise 
     // find all open envelopes, and toggle their classes to closed 
     $('#status_alert .fa-envelope-open-o').toggleClass('fa-envelope-o fa-envelope-open-o'); 
    } 
}) 

JSFIDDLE

---

UPDATE

あなたは後に読み取り専用の入力を更新するために、コードの別の部分を使用して終了機会に、再利用可能な機能にこれを変換しますページの読み込みが完了しました

HTML

<a href="javascript:void(0)" id="status_alert" class="btn btn-success btn-xs"> 
    <i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;<span>unread</span> 
</a> 

JS

var toggleEnvelopeIcon = function(){ 
    // get the number value, or 0 from the input 
    var value = parseInt($('#status_action').val(), 10) || 0; 
    if(value === 0){ // if our value is strictly equal to 0 
     // find all closed envelopes, and toggle their classes to open 
     $('#status_alert .fa-envelope-o').toggleClass('fa-envelope-o fa-envelope-open-o'); 
     $('#status_alert span').text('read'); 
    }else{ // otherwise 
     // find all open envelopes, and toggle their classes to closed 
     $('#status_alert .fa-envelope-open-o').toggleClass('fa-envelope-o fa-envelope-open-o'); 
     $('#status_alert span').text('unread'); 
    } 
} 
$('#status_action').on('input', toggleEnvelopeIcon); 
toggleEnvelopeIcon(); 

Updated JSFIDDLE

---

CSS + JSのOPTION

、私は私のJSにテキスト値を置くことを心配する必要はいけないこの方法（doesntのを個人的に

、私はこのオプションを好む、私はむしろJSは、単一のクラスを切り替えるだろう、とCSS正しいアイコン/テキストの表示/非表示を扱いますロジックのものでビューコードについて私と一緒に座ってください）。

HTML

<a href="javascript:void(0)" id="status_alert" class="btn btn-success btn-xs has-unread"> 
    <span class="show-if-unread"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;unread</span> 
    <span class="show-if-read"><i class="fa fa-envelope-open-o" aria-hidden="true"></i>&nbsp;read</span> 
</a> 

CSS

.has-read .show-if-read, 
.has-unread .show-if-unread{ 
    display:inline-block; 
} 
.has-read .show-if-unread, 
.has-unread .show-if-read{ 
    display:none; 
} 

var toggleEnvelopeIcon = function(){ 
    // get the number value, or 0 from the input 
    var value = parseInt($('#status_action').val(), 10) || 0; 
    if(value === 0){ // if our value is strictly equal to 0 
     // toggle alert classes 
     $('#status_alert').removeClass('has-unread').addClass('has-read'); 
    }else{ // otherwise 
     // toggle alert classes 
     $('#status_alert').removeClass('has-read').addClass('has-unread'); 
    } 
} 

JS