Question

我正在根据用户在页面上操作的单选按钮组构建哈希。为了确保URL中仅包含相关信息，我想排除仍设置为其默认值的字段。我不是自己遍历字段，而是认为jQuery序列化和一些正则表达式会更有效率。但是，此正则表达式会在生成的哈希中留下最后一个默认值。我试过的其他变种删除了太多或太少的＆符号。任何人都可以建议删除设置为默认值的字段的模式，而不管它们在散列中的位置吗？

以下是HTML和JavaScript（使用正则表达式）的示例。整页中有大约十几个切换组，他们会有标签等。

function action() {
    console.log($('#formId').serialize().replace(/toggle(\d*)=default(&:?)/g, ''));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="formId">
    <input type="radio" id="toggle4on" name="toggle4" value="on">
    <input type="radio" id="toggle4off" name="toggle4" value="off">
    <input type="radio" id="toggle4default" name="toggle4" value="default">
    <br>
    <input type="radio" id="toggle5on" name="toggle5" value="on">
    <input type="radio" id="toggle5off" name="toggle5" value="off">
    <input type="radio" id="toggle5default" name="toggle5" value="default">
</form>

<button onclick="action()">Show</button>

Answer 1

我不是自己遍历字段，而是认为jQuery序列化和一些正则表达式会更有效。

这不会更有效率。正则表达是昂贵的和错误的错误。我建议使用jQuery循环遍历字段并删除不需要的值。

示例：

＆＃13;

function isDefaultValue(elem)
{
   return $(elem).val() == "default"; //skip if default value
}


function action() {
    var value = $('#formId input').filter(function(index, el){ 
         return !isDefaultValue(el)
    }).serialize();
    
    console.log(value);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="formId">
    <input type="radio" id="toggle4on" name="toggle4" value="on">
    <input type="radio" id="toggle4off" name="toggle4" value="off">
    <input type="radio" id="toggle4default" name="toggle4" value="default">
    <br>
    <input type="radio" id="toggle5on" name="toggle5" value="on">
    <input type="radio" id="toggle5off" name="toggle5" value="off">
    <input type="radio" id="toggle5default" name="toggle5" value="default">
</form>

<button onclick="action()">Show</button>

＆＃13;

Answer 2

在我看来，有些事情会有所帮助。不要使用onclick=""，请使用jQuery。其次，您不必序列化表单，可以序列化输入元素列表，以便：

$(document).ready(function(){
	$('.js-submit').on('click', function(){
    var $this = $(this);
    console.log($this.closest("form").find("input:not(.js-default-value)").serialize());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formId">
    <input type="radio" id="toggle4on" name="toggle4" value="on">
    <input type="radio" id="toggle4off" name="toggle4" value="off">
    <input type="radio" id="toggle4default" name="toggle4" class="js-default-value" value="default">
    <br>
    <input type="radio" id="toggle5on" name="toggle5" value="on">
    <input type="radio" id="toggle5off" name="toggle5" value="off">
    <input type="radio" id="toggle5default" name="toggle5" class="js-default-value" value="default">
   <button class="js-submit" type="button">Show</button>
</form>

如果您计划使用其他类型的输入（按钮，textarea等），则必须修改find()，但代码也可以通过应用默认类来排除这些输入。

使用正则表达式从jQuery序列化的结果中删除默认值

2 个答案: