0

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-1，它可以工作，如果没有任何文本，按钮禁用，并且重新计算工作良好。

但是如果我输入textarea-2、textarea-3、textarea-N，就不行了。那么我该怎么做才能使所有作品？

谢谢你。

4

1 回答 1

0

如果每个元素<textarea>都有自己的maxlen=280，最好从 using class-更改$('.comment')为id- $('#ctextarea-'+i)on all elements - <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>
于 2012-11-28T10:07:49.973 回答