javascript - Razor View 查找从 javascript 循环分配的 Id

Question

我有以下内容:

for (int i = 0; i < Model.Questions.Count; i++)
{
    @Html.TextAreaFor(modelItem => Model.Questions[i].AnswerText, new { @class = "form-control multi", rows = "6" })
    <div class="remaining-counter">
        <p><span id="Counter_@i"></span> characters remaining</p>
    </div>
}

我正在尝试使用 jquery 为每个文本区域实现一个简单可数的剩余计数器

$('.multi').simplyCountable({
    counter: 'How to get the id here',
    countType: 'characters',
    maxCount: 4000,
    strictMax: false,
    countDirection: 'down',
    thousandSeparator: ',',
});

我想不通的是如何为显示剩余计数的计数器范围获取适当的 ID <span id="Counter_@i"></span>

Answer 1

抱歉，但我觉得破解插件以硬连接选择器是一个糟糕的解决方案。

两种选择...

选项 1 - 无需更改插件

JSFiddle:http://jsfiddle.net/TrueBlueAussie/e82kf82r/7/

您可以迭代 .multi 元素并将它们与匹配的跨度 ID 单独连接起来，如下所示:

$(function () {
    $('.multi').each(function () {
        var counter = $(this);
        counter.simplyCountable({
            counter: '#' + counter.next().find("span").attr('id'),
            countType: 'characters',
            maxCount: 4000,
            strictMax: false,
            countDirection: 'down',
            thousandSeparator: ',',
        });
    });
});

选项 2 - 改进插件

更好的解决方案是改进插件，以便使用 counter 选项查找相对于插入的元素的元素。这将需要一个共同的祖先元素，以便 textarea 和计数器可以被定位。

JSFiddle:http://jsfiddle.net/TrueBlueAussie/e82kf82r/9/

$(function () {
    $('.container').simplyCountable({
        counter: 'span',
        countType: 'characters',
        maxCount: 4000,
        strictMax: false,
        countDirection: 'down',
        thousandSeparator: ',',
    });
});

HTML 更改(添加父 div):

<div class="container">
    <textarea class="multi"></textarea>
    <div class="remaining-counter">
        <p><span class="safe">3,979</span> characters remaining</p>
    </div>
</div>

插件更改摘录:

默认选项添加一个text选择器:

$.fn.simplyCountable = function (options) {
    options = $.extend({
        text: 'textarea',
        counter: '.counter',

新的插件初始化代码如下:

return $(this).each(function () {
        var $element = $(this);
        var countable = $element.find(options.text);
        var counter = $element.find(options.counter);