javascript - 使用 Jquery 替换特定的名称属性？

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

我想用一个增量器替换它，该增量器在它在页面上找到的这个名称属性的每次迭代中加 1。

Answer 1

有两种方法可以做到这一点，您可以使用 localstorage 或者您可以使用 sessionStorage。

localStorage 和 sessionStorage 都扩展了 Storage。除了 sessionStorage 的预期“非持久性”之外，它们之间没有区别。

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

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

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

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

然后在点击第二个按钮时，它将检查本地存储，然后在每次点击时继续添加计数器。

示例:

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'>");
        }); 
    }
});