Question

我正在尝试使用javascript根据类在表单元素（输入框和选择下拉列表）中查找重复值。这就是我所拥有的，但它不起作用。有一个更好的方法吗？我是javascript的新手，并将其视为不同帖子的解决方案。

编辑：仅调用内部函数。如果我打破它们，它们就会被召唤。这是为什么？

    <%@ taglib prefix="s" uri="/struts-tags"%>

<s:include value="Header.jsp">
<s:param name="pageScript">
        <script type="text/javascript">

    function checkForDuplicates() {
              var hasDuplicates = false;
                  $('.class_name').each(function () {
                      var inputsWithSameValue = $(this).val();
                      hasDuplicates = $('.class_name').not(this).filter(function () {
                              return $(this).val() === inputsWithSameValue;
                      }).length > 0;
                      if (hasDuplicates){
                      alert("cannot have duplicates")
                  }
                  });

          }

        </script>
    </s:param>
</s:include>

<div id="container-content">
    <div id="content">
        <s:form action="someAction" theme="simple" method="get" id="theForm">

                        <s:textfield theme="simple" class="class_name"/>

                        <s:textfield theme="simple" class="class_name" />

                        <s:select headerKey="" headerValue="Select Value" 
                        list="values" listKey="value" class="class_name" size="1"/>

            <s:submit action="" value="Save" onclick="return checkForDuplicates()"/>

        </s:form>

        <%-- end content --%>
    </div>
    <%-- end container-content --%>
</div>

<s:include value="Footer.jsp" />

我正在导入这些：

<script src="scripts/jquery-1.4-min.js"></script>
<script src="scripts/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="scripts/jquery.supertextarea.min.js" type="text/javascript"></script>

有什么问题？我在.each之后的第一个内部函数中放了一个断点，但它永远不会进入那里。

由于

Answer 1

这是基于ROX的答案，但是，我认为我们可以检查下一个元素的输入是否在数组内，而不需要第二个函数。

function checkDuplicates() {
  // get all input elements
  var $elems = $('.class_name');

  // we store the inputs value inside this array
  var values = [];
  // return this
  var isDuplicated = false;
  // loop through elements
  $elems.each(function () {
    //If value is empty then move to the next iteration.
    if(!this.value) return true;
    //If the stored array has this value, break from the each method
    if(values.indexOf(this.value) !== -1) {
       isDuplicated = true;
       return false;
     }
    // store the value
    values.push(this.value);
  });   
return isDuplicated;     
}

您可能想要检查代码中某处的输入是否为空，但这取决于您。

修改：https://jsfiddle.net/65ss1cxj/

Answer 2

你可以让你的功能更好，不需要在你的第一个循环中循环你的所有元素。

只需将所有输入值存储到数组中，然后使该数组成为唯一值，并比较它们的长度。

// a function to make an array values unique 
// http://stackoverflow.com/a/840849/3971911
function eliminateDuplicates(arr) {
  var i,
      len=arr.length,
      out=[],
      obj={};

  for (i=0;i<len;i++) {
    obj[arr[i]]=0;
  }
  for (i in obj) {
    out.push(i);
  }
  return out;
}


function checkDuplicates() {
  // get all input elements
  var $elems = $('.class_name');
  
  // we store the inputs value inside this array
  var values = [];
  
  // loop through elements
  $elems.each(function () {
    // if the value is empty, just pass it
    if (this.value == '') {
      return true;
    }
    
    // store the value
    values.push(this.value);
  });
  
  // make the values array unique
  var uniqueValues = eliminateDuplicates(values);
  
  // return false if the unique array length is not equal to the original array
  return uniqueValues.length == values.length;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
  <div><input type="text" class="class_name" /></div>  
  <div><input type="text" class="class_name" /></div>
  <div><input type="text" class="class_name" /></div>
  <div><input type="text" class="class_name" /></div>
  
  <input type="submit" value="Go" onclick="return checkDuplicates()" />
</form>

使用javascript按类在表单元素中查找重复值

2 个答案: