使用Jquery替换name属性的特定部分？

Question

当我按下页面上的提交按钮并增加整数值时，我想替换一些文本。

<input type="text" id="peerSubscription[peerEventSubscriptions][REPLACE_THIS_ON_PERSIST][maxThreshold]" name="peerSubscription[peerEventSubscriptions][REPLACE_THIS_ON_PERSIST][maxThreshold]" required="required" placeholder="Max" highlight_from="min" hover_error="1" rel="slider" min="0" max="1000" step="100" prefix="" suffix="" divisor="1" class="form-control" value="500">

读物在哪里：

REPLACE_THIS_ON_PERSIST

我希望被一个递增器替换，该递增器在页面上找到的这个name属性的每次迭代中加1。

Answer 1

有两种方法可以执行此操作，您可以使用localstorage，也可以使用sessionStorage。

localStorage和sessionStorage都扩展了存储空间。它们之间没有区别，除了预期的＆＃34;非持久性＆＃34; sessionStorage。

也就是说，localStorage中存储的数据会一直存在，直到被明确删除。所做的更改将保存并可用于该网站的所有当前和未来访问。

对于sessionStorage，更改仅适用于每个窗口（或Chrome和Firefox等浏览器中的标签）。所做的更改将保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，存储将被删除。

所以在我的代码中，它会在点击按钮时显示，检查localstorage，如果没有localstorage，则将[REPLACE_THIS_ON_PERSIST]替换为[submission=" + counter + "]并创建localstorage。

本地存储： localStorage.setItem("submission", counter);

然后在第二个按钮上单击它将检查localstorage，然后在每次单击时继续添加计数器。

示例：

id='peerSubscription[peerEventSubscriptions][submission=1][maxThreshold]' id='peerSubscription[peerEventSubscriptions][submission=2][maxThreshold]' id='peerSubscription[peerEventSubscriptions][submission=3][maxThreshold]'

JSFiddle Example (Shows how to do it by ID and name attributes)

代码（仅按ID属性显示）：

var counter = 0;

if (localStorage.submission) 
{      
    counter = localStorage.submission;
    if ($("input[id*='[REPLACE_THIS_ON_PERSIST]']"))
    {
        $("input[id*='[REPLACE_THIS_ON_PERSIST]']").each(function()
        {
            var select = $(this);
            select.replaceWith("<input type='text' id='peerSubscription[peerEventSubscriptions][submission=" + localStorage.submission + "][maxThreshold]' name='peerSubscription[peerEventSubscriptions][REPLACE_THIS_ON_PERSIST][maxThreshold]' required='required' placeholder='Max' highlight_from='min' hover_error='1' rel='slider' min='0' max='1000' step='100' prefix='' suffix='' divisor='1' class='form-control' value='500'>");
        }); 
    }
}

$("#buttonTest").on('click', function () 
{
    if (localStorage.submission) 
    {                         
        $("input[id*='submission=" + localStorage.submission + "']").each(function()
        {
            var select = $(this);
            counter++;
            localStorage.setItem("submission", counter);
            select.replaceWith("<input type='text' id='peerSubscription[peerEventSubscriptions][submission=" + localStorage.submission + "][maxThreshold]' name='peerSubscription[peerEventSubscriptions][REPLACE_THIS_ON_PERSIST][maxThreshold]' required='required' placeholder='Max' highlight_from='min' hover_error='1' rel='slider' min='0' max='1000' step='100' prefix='' suffix='' divisor='1' class='form-control' value='500'>");
        });
    }
    else
    {
        $("input[id*='[REPLACE_THIS_ON_PERSIST]']").each(function()
        {
            counter++;
            var select = $(this);
            // Store
            localStorage.setItem("submission", counter);

            select.replaceWith("<input type='text' id='peerSubscription[peerEventSubscriptions][submission=" + counter + "][maxThreshold]' name='peerSubscription[peerEventSubscriptions][REPLACE_THIS_ON_PERSIST][maxThreshold]' required='required' placeholder='Max' highlight_from='min' hover_error='1' rel='slider' min='0' max='1000' step='100' prefix='' suffix='' divisor='1' class='form-control' value='500'>");
        }); 
    }
});

https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

示例：

JSFIDDLE Example (sessionStorage)

<强>代码：

var counter = 0;

if (sessionStorage.getItem("submission")) 
{      
    counter = sessionStorage.getItem("submission");
    if ($("input[id*='[REPLACE_THIS_ON_PERSIST]'], input[name*='[REPLACE_THIS_ON_PERSIST]']"))
    {
        $("input[id*='[REPLACE_THIS_ON_PERSIST]'], input[name*='[REPLACE_THIS_ON_PERSIST]']").each(function()
        {
            var select = $(this);
            select.replaceWith("<input type='text' id='peerSubscription[peerEventSubscriptions][submission=" + sessionStorage.getItem('submission') + "][maxThreshold]' name='peerSubscription[peerEventSubscriptions][submission=" + sessionStorage.getItem('submission') + "][maxThreshold]' required='required' placeholder='Max' highlight_from='min' hover_error='1' rel='slider' min='0' max='1000' step='100' prefix='' suffix='' divisor='1' class='form-control' value='500'>");
        }); 
    }
}

$("#buttonTest").on('click', function () 
{
    if (sessionStorage.getItem('submission')) 
    {                         
        $("input[id*='submission=" + sessionStorage.getItem('submission') + "']").each(function()
        {
            var select = $(this);
            counter++;
            sessionStorage.setItem("submission", counter);
            select.replaceWith("<input type='text' id='peerSubscription[peerEventSubscriptions][submission=" + sessionStorage.getItem('submission') + "][maxThreshold]' name='peerSubscription[peerEventSubscriptions][submission=" + sessionStorage.getItem('submission') + "][maxThreshold]' required='required' placeholder='Max' highlight_from='min' hover_error='1' rel='slider' min='0' max='1000' step='100' prefix='' suffix='' divisor='1' class='form-control' value='500'>");
        });
    }
    else
    {
        $("input[id*='[REPLACE_THIS_ON_PERSIST]'], input[name*='[REPLACE_THIS_ON_PERSIST]']").each(function()
        {
            counter++;
            var select = $(this);
            // Store
            sessionStorage.setItem("submission", counter);

            select.replaceWith("<input type='text' id='peerSubscription[peerEventSubscriptions][submission=" + counter + "][maxThreshold]' name='peerSubscription[peerEventSubscriptions][submission=" + counter + "][maxThreshold]' required='required' placeholder='Max' highlight_from='min' hover_error='1' rel='slider' min='0' max='1000' step='100' prefix='' suffix='' divisor='1' class='form-control' value='500'>");
        }); 
    }
});