无需刷新即可实时更改字体真棒类

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

你应该挂

接到input上的input事件，然后使用toggleClass来切换必要的类。

$('#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');
    }
})

吉斯菲德尔

---

更新

将其转换为可重用的函数，以防您最终在页面完成加载后使用另一段代码来更新只读输入

.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();

更新的 JSFIDDLE

---

CSS + JS 选项

就个人而言，我更喜欢这个选项，我宁愿让 JS 只切换一个类，而 CSS 处理正确图标/文本的显示/隐藏，这样我就不必担心将文本值放入我的 JS 中（在逻辑内容中的视图代码方面与我无关）。

.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;
}

.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
        // toggle alert classes
        $('#status_alert').removeClass('has-unread').addClass('has-read');
    }else{ // otherwise
        // toggle alert classes
        $('#status_alert').removeClass('has-read').addClass('has-unread');
    }
}

CSS + JS JSFIDDLE