javascript - Jquery自定义函数问题

Question

我试图一个一个地获取所有文章元素的文章元素 id 值，这样我就可以将它添加到 countCharacters() 函数 这样我就可以对每个文本区域进行唯一的字符计数，但是我的两个 jquery 函数似乎都无法正常工作。例如，我的字符数应该是这样的。

countCharacters('#comment-1535 .review-info', '#comment-1535 .review-info + div .count', 5000);
countCharacters('#comment-553 .review-info', '#comment-553 .review-info + div .count', 5000);
countCharacters('#comment-6547 .review-info', '#comment-6547 .review-info + div .count', 5000);

这是我的 JSFiddle https://jsfiddle.net/jm52wg9k/

HTML

<article class="review" id="comment-1535">
  <div class="review-details">
    <div class="review-stats">
      <!-- content -->
    </div>
    <form method="post" action="" class="review-form">
      <fieldset>
        <ol>
          <li><label for="review-info">Review Info:</label></li>
          <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
        </ol>
      </fieldset>
      <fieldset>  
        <ol>
          <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
        </ol>
      </fieldset>
    </form>
  </div>
</article>


<article class="review" id="comment-553">
  <div class="review-details">
    <div class="review-stats">
      <!-- content -->
    </div>
    <form method="post" action="" class="review-form">
      <fieldset>
        <ol>
          <li><label for="review-info">Review Info:</label></li>
          <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
        </ol>
      </fieldset>
      <fieldset>  
        <ol>
          <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
        </ol>
      </fieldset>
    </form>
  </div>
</article>


<article class="review" id="comment-6547">
  <div class="review-details">
    <div class="review-stats">
      <!-- content -->
    </div>
    <form method="post" action="" class="review-form">
      <fieldset>
        <ol>
          <li><label for="review-info">Review Info:</label></li>
          <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
        </ol>
      </fieldset>
      <fieldset>  
        <ol>
          <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
        </ol>
      </fieldset>
    </form>
  </div>
</article>

查询

$(document).ready(function() {
    function countCharacters( input, output, max ) {
        var $input = $(input);
        var $output = $(output);
        $output.text(max + ' characters left');
        $input
            .keydown(function(event) {
                if (event.keyCode != 8 &&
                    event.keyCode != 46 &&
                    $input.val().length >= max)
                    event.preventDefault();
            })
            .keyup(function() {
                var val = $input.val().slice(0, max);
                var left = max - val.length;
                $input.val(val);
                $output.text(left + ' characters left');
            });
    }
    countCharacters(reviewInfo() + '.review-info', reviewInfo() + '.review-info + div .count', 5000);
});

$(document).ready(function(){
     function reviewInfo(){
        var review = $('.review-info').closest('article').attr('id');
        var review2 = '#' + review;
        return review2;
    };
}); 

CSS

*{
  border: 0;
  margin: 0;
  padding: 0;
}

article{
  margin-top: 1em;  
}

textarea{
  width: 90%;
}

input{
  margin: 1em 0;
  color: #fff;
  background: green;
  padding: .5em;
}

Answer 1

DEMO

您的代码很好，但您的实现方式不正确。下面是我对您的代码所做的更改。有关详细信息，请参阅内联评论

function countCharacters(input, output, max,event) {
      //Only changes here is I removed .keyup and .keydown which I've binded outside
      var $input = $(input);
      var $output = $(output);
      if (event.keyCode != 8 && event.keyCode != 46 &&
         $input.val().length >= max)
            event.preventDefault();
       var val = $input.val().slice(0, max);
       var left = max - val.length;
       $input.val(val);
       $output.text(left + ' characters left');
}

$(".review-info").on('keyup keypress',function(event){
    var _this=$(this);//key up and key press out side document.ready
    var _thisCount=_this.next('.some').find('.count');
    //find the span using current control's next .some div and its child .count
    var max=5000; //also you can add as an data-* attribute to your controls
    countCharacters(_this,_thisCount,max,event);//call the function with necessary params
})