Question

JS

$(document).ready(function(){

    $('.comment').bind("blur focus keydown keypress keyup", function(){recountss();});
    $('input.comment_button').attr('disabled','disabled');

    $('#form').submit(function(e){
        tweet();
    });

});

function recountss()
{
    var maxlen=280;
    var current = maxlen-$('.comment').val().length;
    $('.counters').html(current);

    if(current<0 || current==maxlen)
    {
        $('.counters').css('color','#D40D12');
                 $('input.comment_button').attr('disabled','disabled').addClass('inact');
    }
    else if (!$.trim($(".comment").val())) 
    {
            $('input.comment_button').attr('disabled','disabled').addClass('inact');
    }
    else
            $('input.comment_button').removeAttr('disabled').removeClass('inact');


    if(current<10)
    {
        $('.counters').css('color','#D40D12');

    } 
    else if(current<20)
    {
        $('.counters').css('color','#5C0002');
    }
    else
    {
        $('.counters').css('color','#C0C0C0');
    }

HTML

<form method="post" action="" id="form">
<textarea name="comment" class="comment" id="ctextarea<?php echo $msg_id;?>" ></textarea>
<input type="hidden" name="uid" id="uid" value="<?php echo $uid; ?>"/>
<div class="p"></div>
    <input type="submit"  value="Comment"  id="<?php echo $msg_id;?>" class="comment_button"/>
    <span class="counters">
        280
    </span>
</form>

我使用jquery。我有超过1 textarea，如果我输入textarea-1，它可以工作，如果没有任何文本，按钮被禁用，并重新计算工作正常。

但如果我输入textarea-2，textarea-3，textarea-N，它就无法工作。那么如何才能完成所有工作？

谢谢。

Answer 1

如果每个<textarea>都有自己的maxlen=280，最好从使用class - $('.comment')更改为id - $('#ctextarea-'+i)关于所有元素 - <textarea>，<button>，<span>等

这是未经测试的，但应该帮助您指明正确的方向。

$(document).ready(function(){

    var i=1;
    var numtextarea = 1; 
    $('#form').find('textarea').each(function(){numtextarea++;} //find number of <textarea>'s
    while(i<numtextarea){ // loop through each <textarea>
    $('#ctextarea-'+i).bind("blur focus keydown keypress keyup", function(){recountss(i);});
    $('#comment_button-'i).attr('disabled','disabled'); 
    }
    });
    $('#form').submit(function(e){
        tweet();
    });
});

    function recountss(i)
    {
        var maxlen=280;
        var current = maxlen-$('#ctextarea-'+i).val().length;
        $('#counters-'+i).html(current);
        if(current<0 || current==maxlen)
        {
            $('#counters-'+i).css('color','#D40D12');
            $('#comment_button-'+i).attr('disabled','disabled').addClass('inact');
        }
        else if (!$.trim($("#ctextarea-'+i).val())) {
            $('#comment_button-'+i).attr('disabled','disabled').addClass('inact');
        }
        else
            $('#comment_button-'+i).removeAttr('disabled').removeClass('inact');


        if(current<10)
            $('#counters-'+i).css('color','#D40D12');

        else if(current<20)
            $('#counters-'+i).css('color','#5C0002');

        else
            $('#counters-'+i).css('color','#C0C0C0');
    }

你的表单看起来应该像 -

<form method="post" action="" id="form">

<textarea name="comment" class="comment" id="ctextarea-1" ></textarea>
<input type="hidden" name="uid" id="uid" value="1"/>
<div class="p"></div>
<input type="submit"  value="Comment"  id="comment_button-1" class="comment_button"/>
<span id="counters-1">
    280
</span>

<textarea name="comment" class="comment" id="ctextarea-2" ></textarea>
<input type="hidden" name="uid" id="uid" value="2"/>
<div class="p"></div>
<input type="submit"  value="Comment"  id="comment_button-2" class="comment_button"/>
<span id="counters-2">
    280
</span>

...

<textarea name="comment" class="comment" id="ctextarea-N" ></textarea>
<input type="hidden" name="uid" id="uid" value="N"/>
<div class="p"></div>
<input type="submit"  value="Comment"  id="comment_button-N" class="comment_button"/>
<span id="counters-N">
    280
</span>

</form>

Textarea-N具有重新计数和禁用按钮功能

1 个答案: