jQuery - 如何将 AND 与选择器一起使用？答案

【问题标题】：jQuery - How do I use AND with Selector?jQuery - 如何将 AND 与选择器一起使用？
【发布时间】：2018-06-12 06:12:45
【问题描述】：

我的代码的功能是在ptype 文本字段为空时提醒用户。

$("input[name*='ptype']").each(function() {
                if ($(this).val() == "") {
                    $(this).css({'background-color' : '#feffe3'});
                    e.preventDefault();
                    alert("Enter Value!");
                }
            });

但是，我需要添加另一个条件，其中另一个字段 amount 不为 0。以便在 ptype="" && amount!=0 时触发该函数。我是 jQuery 的新手，我不确定如何在这里使用 AND 运算符。我尝试根据其他问题做一些，但似乎没有用。

$("input[name*='ptype'][amount!='0']").each(function() {

$("input[name*='ptype'] , [amount!='0']").each(function() {

我错过了什么？

【问题讨论】：

发布您的 HTML 以更好地了解问题
您刚刚使用&& 实现了ptype="" && amount!=0。 Jquery 是 Javascript。
@AnkitAgarwal 我只需要知道如何使用and 运算符
@user3502626 不行，试过了

标签： javascript jquery jquery-selectors

【解决方案1】：

你可以用 && 符号来做到这一点。代码取决于您的金额字段所在的位置以及它是什么。如果我猜对了，应该是这样的：

$("input[name*='ptype']").each(function() {
                if ($(this).val() == "" && $(this).parent().find(input[name='amount']).val() != 0) {
                    $(this).css({'background-color' : '#feffe3'});
                    e.preventDefault();
                    alert("Enter Value!");
                }
            });

【讨论】：

【解决方案2】：

该代码$("input[name*='ptype'][amount!='0']").each(function() { 有效。你必须检查CSS selectors list。

问题可能在您的*= 选择中。 input[name*="ptype"] 表示选择 name 属性值包含子字符串“ptype”的每个元素。

$('input[name*="ptype"][amount!="0"]').each(function() {
                if ($(this).val() == "") {
                    $(this).css({'background-color' : '#feffe3'});
                    e.preventDefault();
                    alert("Enter Value!");
                }
            });

看看这个测试https://jsfiddle.net/xpvt214o/211871/

【讨论】：

amount 是一个输入名称，例如 ptype
我不太明白你的评论。如果amount 不是同一个input[name*="ptype"] 中的属性，您应该显示您的HTML 表单代码。

【解决方案3】：

«其中另一个字段»是有问题的关键。

所以你需要一个选择器来检查被选元素是否为空并且另一个元素是否不为零。

喂！

这里的逻辑问题。使用$(selector)，您可以查找一些元素。

许多匹配元素的选择器中没有 AND / OR。
选择器是一个匹配元素的集合。

这个选择器无法检查另一个集合的属性value。

因此，您必须了解您的标记并进行一些导航...并且注意变量类型。

$("input[name*='ptype']").each(function() {
  if ( parseInt( $(this).next("input").val() ) != 0) {
    $(this).css({"background-color" : "red"});
    alert("Enter Value!");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ptype: <input type="text" name="ptype"><br>
amount: <input type="text" name="amount" value="1">

据我了解，您必须在此处寻找另一个元素的价值。所以你必须知道那个“其他”元素是什么，使用的方法可能会根据你的 HTML 有很大的不同......

【讨论】：

【解决方案4】：

您可以在按钮中使用此功能。

function check(e){

    var verror = false;

    $("input[name*='ptype']").each(function(index, value) {
        var amount = $($("input[name='amount[]']").get(index)).val();
        var ptype = $(this).val();
        if(ptype.length <= 0 && amount.length > 0 ){
            verror = true;
            $(this).focus();
            return false;
        }
    });

    if(verror){
        e.preventDefault();
        alert("Enter Value!");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    ptype: <input type="text" name="ptype[]">
    amount: <input type="text" name="amount[]" value="1"> <br>

    ptype: <input type="text" name="ptype[]">
    amount: <input type="text" name="amount[]" value="2"> <br>

    <button type="button" onclick="check(event)">Click</button>
</form>

【讨论】：