时间戳

首页 > 解决方案 > 检查元素是否具有某个类并属于包含某个值的表单

javascript - 检查元素是否具有某个类并属于包含某个值的表单

问题描述

我需要创建一个验证函数，它将检查某个元素的两件事：

  1. 它有一定的等级
  2. 它属于在表单操作上包含部分文本匹配的表单

例如，给定以下内容：

<form method="post" action="/page1">
  <div>
    <ul>
      <li><input type="text" id="text1" class="red" /></li>
      <li><input type="text" id="text2" class="red" /></li>
      <li><button id="button1" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2">
  <div>
    <ul>
      <li><input type="text" id="text3" class="red" /></li>
      <li><input type="text" id="text4" class="blue" /></li>
      <li><button id="button2" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2andpage3">
  <div>
    <ul>
      <li><input type="text" id="text5" class="red" /></li>
      <li><input type="text" id="text6" class="blue" /></li>
      <li><button id="button3" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

我希望能够创建一个函数并获得以下结果：

isElementValid('text1', 'blue', 'page2') // false
isElementValid('button1', 'blue', 'page2') // false
isElementValid('text3', 'blue', 'page2') // false
isElementValid('text4', 'blue', 'page2') // true
isElementValid('button2', 'blue', 'page2') // true
isElementValid('button3', 'blue', 'page2') // true

我假设我将能够使用hasClass和parents来创建以下内容：

function isElementValid(element, color, action) {
 var matchingClass = $(element).hasClass(color);
 var matchingParent = $(element).parents() //....attr('action').contains(action);
 return matchingClass && matchingParent;
}

但我不确定检查父母的行动表格的最佳方式。这是沿着正确的路线还是有更好的方法？

标签： javascriptjquery

解决方案

要检测元素上的属性是否包含给定值，您可以使用Attribute contains选择器。然后，您可以使用length生成的 jQuery 对象的属性来确定是否找到任何东西。

您还应该注意，您的逻辑缺少您使用的 id#上的选择器前缀。element试试这个：

function isElementValid(element, color, action) {
  let $el = $('#' + element);
  let matchingClass = $el.hasClass(color);
  let matchingParent = $el.closest(`form[action*="${action}"]`).length != 0;
  return matchingClass && matchingParent;
}

console.log(isElementValid('text1', 'blue', 'page2')); // false
console.log(isElementValid('button1', 'blue', 'page2')); // false
console.log(isElementValid('text3', 'blue', 'page2')); // false
console.log(isElementValid('text4', 'blue', 'page2')); // true
console.log(isElementValid('button2', 'blue', 'page2')); // true
console.log(isElementValid('button3', 'blue', 'page2')); // true
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="/page1">
  <div>
    <ul>
      <li><input type="text" id="text1" class="red" /></li>
      <li><input type="text" id="text2" class="red" /></li>
      <li><button id="button1" class="blue">Enter</button></li>
    </ul>
  </div>
</form>
<form method="post" action="/page2">
  <div>
    <ul>
      <li><input type="text" id="text3" class="red" /></li>
      <li><input type="text" id="text4" class="blue" /></li>
      <li><button id="button2" class="blue">Enter</button></li>
    </ul>
  </div>
</form>
<form method="post" action="/page2andpage3">
  <div>
    <ul>
      <li><input type="text" id="text5" class="red" /></li>
      <li><input type="text" id="text6" class="blue" /></li>
      <li><button id="button3" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

推荐阅读