我在The Rails教程（第10章，练习7）中尝试使用信息here作为基础，并在StackOverflow答案here和here的帮助下尝试了微博角色倒计时。
在屏幕上，它看起来像this，并且当您接近字符限制时，文本会逐渐变红，并且一旦微型帖子超限，“发布”按钮将被禁用，完成like so。
当前的实现如下所示：
views / shared / _micropost_form.html.haml
= form_for @micropost do |f|
= render 'shared/error_messages', object: f.object
.field= f.text_area :content, placeholder: t('.compose_micropost')
%span
.remaining= t('.characters_remaining').html_safe
.countdown
= f.submit t('.post'), class: "btn btn-large btn-primary"
资产/javascripts/microposts.js.coffee
updateCountdownAttributes = (toRemove, toAdd = null) ->
for attr in toRemove
$(".remaining, .countdown").removeClass attr
if toAdd
$(".remaining, .countdown").addClass toAdd
if toAdd is "overlimit"
$("input.btn.btn-large.btn-primary").attr("disabled", "true")
else
$("input.btn.btn-large.btn-primary").removeAttr("disabled")
updateCountdown = ->
remaining = 140 - $("#micropost_content").val().length
toRemove = ["nearlimit", "almostlimit", "overlimit"]
if remaining > 19
updateCountdownAttributes(toRemove)
if remaining < 20
toAdd = (toRemove.filter (attr) -> attr is "nearlimit").toString()
updateCountdownAttributes(toRemove, toAdd)
if remaining < 11
toAdd = (toRemove.filter (attr) -> attr is "almostlimit").toString()
updateCountdownAttributes(toRemove, toAdd)
if remaining < 0
toAdd = (toRemove.filter (attr) -> attr is "overlimit").toString()
updateCountdownAttributes(toRemove, toAdd)
$(".countdown").text remaining
$(document).ready ->
$(".countdown").text 140
$("#micropost_content").change updateCountdown
$("#micropost_content").keyup updateCountdown
$("#micropost_content").keydown updateCountdown
$("#micropost_content").keypress updateCountdown
资产/样式表/custom.css.scss
...
/* Micropost character countdown */
.remaining, .countdown {
display: inline;
color: $grayLight;
float: right;
}
.overlimit {
color: $red;
}
.almostlimit {
color: hsl(360, 57%, 21%);
}
.nearlimit {
color: $gray;
}
config / locales / en.yml
en:
...
shared:
...
micropost_form:
compose_micropost: "Compose new micropost..."
post: "Post"
characters_remaining: " characters remaining."
从这里开始，我有两个问题/问题：
第一个是，如果可能的话，我希望能够对“剩余字符”字符串进行适当的复数处理。也许像这样：
views / shared / _micropost_form.html.haml
...
%span
.remaining= t('.characters_remaining', count: [[.countdown value]]).html_safe
.countdown
...
config / locales / en.yml
...
micropost_form:
...
characters_remaining:
one: " character remaining."
other: " characters remaining."
但是，我不知道如何以将其传递给
.countdown参数的方式来检索count div中的值。我怎样才能做到这一点？假设第一个问题可以解决，我也想摆脱负数字符，而是将“剩余-2个字符”更改为“超过2个字符”。也许在视图中使用某种分支逻辑和一些JavaScript将负数更改为正数...？我在这里不确定，所以任何帮助将不胜感激。
views / shared / _micropost_form.html.haml
...
%span
- [[ if .countdown value < 0 ]]
.remaining= t('.characters_over',
count: [[positive .countdown value]]).html_safe
- [[ else ]]
.remaining= t('.characters_remaining', count: [[.countdown value]]).html_safe
.countdown
...
config / locales / en.yml
...
micropost_form:
...
characters_remaining:
one: " character remaining."
other: " characters remaining."
characters_over:
one: " character over."
other: " characters over."
最佳答案
我也正在阅读本教程，并找到了这篇文章，虽然我喜欢您添加的CSS来使其外观统一（我已将其用作自己的:)），但我认为您的解决方案过于复杂。对我来说，这只是两个更改：js脚本和将脚本添加到我的视图中。
我的JS文件：character_countdown.js
function updateCountdown() {
// 140 characters max
var left = 140 - jQuery('.micropost_text_area').val().length;
if(left == 1) {
var charactersLeft = ' character left.'
}
else if(left < 0){
var charactersLeft = ' characters too many.'
}
else{
var charactersLeft = ' characters left.'
}
jQuery('.countdown').text(Math.abs(left) + charactersLeft);
}
jQuery(document).ready(function($) {
updateCountdown();
$('.micropost_text_area').change(updateCountdown);
$('.micropost_text_area').keyup(updateCountdown);
});
这是我将其添加到视图中的位置
<script src="app/assets/javascripts/character_countdown.js"></script>
<%= form_for(@micropost) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
请让我知道你在想什么 ：）
关于jquery - Micropost角色倒计时(Rails教程，第二版，第10章，练习7)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10955850/