jQuery 选择器仅选择第一个元素

发布于 2024-10-25 02:03:43 字数 888 浏览 1 评论 0原文

我有一个关于使用 jquery 的小问题。我有以下代码：

<html> 
<head>

    <script src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("form").submit(function(){
       if(!$(':text').val()){
        $("span").text("sdfgsd").show();

        };return false;
      })
      });
    </script>
</head>
<body>
    <form action=""  id="ff" >
       <span></span>
        <input type="text" name="test" /> <br />
        <input type="text" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>

</body>

问题是选择器仅针对第一个文本框激活。如果您在第一个文本框中输入值，则不会激活触发器。 :text 或 :input 都无法正常工作。

有人有什么想法吗？

提前致谢，丹尼斯尔

原文

I have a small question about using jquery.
I have the following code:

<html> 
<head>

    <script src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("form").submit(function(){
       if(!$(':text').val()){
        $("span").text("sdfgsd").show();

        };return false;
      })
      });
    </script>
</head>
<body>
    <form action=""  id="ff" >
       <span></span>
        <input type="text" name="test" /> <br />
        <input type="text" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>

</body>

the problem is that the selector is only activated for the first textbox. if you enter a value in the first textbox the trigger is not activated. neither :text or :input work properly.

does anyone have any ideas??

thanx in advance,
denisr

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

演出会有结束 2024-11-01 02:03:43

匹配多个元素的 jQuery 选择器上的 val() 函数返回第一个匹配元素的值。您需要循环遍历所有元素并检查每个元素的值。

$(document).ready(function(){
  $("form").submit(function(){
     var inputsHaveValues = true;
     $(':text').each( function() {
         if (!$(this).val()) {
            inputsHaveValues = false;
            break;
         }
     });

     if (!inputsHaveValues) {
         $("span").text("sdfgsd").show();
         return false;
     }
  })
});

The val() function on a jQuery selector matching more than one element returns the value of the first element matched. You need to loop over all the elements and check the value of each one.

$(document).ready(function(){
  $("form").submit(function(){
     var inputsHaveValues = true;
     $(':text').each( function() {
         if (!$(this).val()) {
            inputsHaveValues = false;
            break;
         }
     });

     if (!inputsHaveValues) {
         $("span").text("sdfgsd").show();
         return false;
     }
  })
});

回复收藏 0 原文

初相遇 2024-11-01 02:03:43

val 是一种破坏性方法（您无法链接到它），因此当应用于其中包含许多元素的对象时，必须返回一个值，该值会做第一。

您应该查看 each 方法来迭代所有文本字段。

$('input:text').each(function(index, elm) {
  if(!$(this).val()){
    $("span").text("sdfgsd").show();
  };
});

您可以使用索引来标识要在其中显示错误消息的特定span。

val is a destructive method (you can't chain on to it) and so when applied to an object with many elements in it, has to return a value, which it will do for the first.

You should look at the each method to iterate through all your text fields.

$('input:text').each(function(index, elm) {
  if(!$(this).val()){
    $("span").text("sdfgsd").show();
  };
});

You could use the index to identify a particular span in which to show the error message.

回复收藏 0 原文

复古式 2024-11-01 02:03:43

我建议您这样做：

<html> 
<head>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#ff").submit(function(e) {
                $('.text-input').each(function() {
                    if ($(this).val() == '') {
                        $("#msg").text("sdfgsd");
                        e.preventDefault();
                        return false;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form method="post" action=""  id="ff">
        <span id="msg"></span>
        <input type="text" class="text-input" name="test" /> <br />
        <input type="text" class="text-input" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>
</body>
</html>

尝试尽可能多地使用 id 或 class 属性来访问元素，因为它更高效且不易
出错e.preventDefault() 阻止提交表单
使用 return false; 立即退出 each 循环

I'd suggest you to do something like that:

<html> 
<head>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#ff").submit(function(e) {
                $('.text-input').each(function() {
                    if ($(this).val() == '') {
                        $("#msg").text("sdfgsd");
                        e.preventDefault();
                        return false;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form method="post" action=""  id="ff">
        <span id="msg"></span>
        <input type="text" class="text-input" name="test" /> <br />
        <input type="text" class="text-input" name="test3" /> <br />
        <input type="checkbox" name="test2" /> <br />
        <input type="submit" value="push it" />
    </form>
</body>
</html>

Try to use as much as possible the id or class attributes to access elements because it's more efficient and less prone to errors
Use e.preventDefault() to prevent from submitting the form
Use return false; to get out of the each loop right away

回复收藏 0 原文

一生独一 2024-11-01 02:03:43

尝试定义一个应用于每个文本的类，定义一个表单 id，或者分别使用 jquery。另外，检查 JavaScript 错误。

http://api.jquery.com/jQuery.each/

回复收藏 0 原文

や三分注定 2024-11-01 02:03:43

$(document).ready(function(){
    $("#ff").submit(function(event){
        $('input[type="text"]').each(function () {
            if(!$(this).val()){
               $("span").text("Foobar");
            }
        });
       event.preventDefault();
    })
});

首先请使用
event.preventDefault(); 其多
比return false;更好。
使用 id - $(#ff) - 即时
仅$('form')。
仅使用 input[type="text"] 即时 :text
使用 .each() - 就像我上面的一些人说的

$(document).ready(function(){
    $("#ff").submit(function(event){
        $('input[type="text"]').each(function () {
            if(!$(this).val()){
               $("span").text("Foobar");
            }
        });
       event.preventDefault();
    })
});

First of all please use
event.preventDefault(); its much
better than return false;.
Use the id - $(#ff) - instant of
only $('form').
Use input[type="text"] instant of only :text
Use .each() - like some people above me said