Question

我将在页面上有几个表单，它们都使用相同的类。他们都以同样的方式工作。但是，我有问题使事情有效。当用户更改字段时，需要更新其他字段。

当只有一个表格时，我的工作正常。但是，当我尝试使用多个表单时，它会崩溃。我从id切换到类来运行脚本，但现在我处于jQuery不会给我ID的情况。

以下是HTML的内容：

<form class='varaosaTuote' id='lomake0'> 
                <input type='hidden' value='Add' name='Action' id='Toiminto'> 

            <table> <tr> 

            <th> Koko </th>

            <th> RTK    </th>

            <th> Määrä  </th>

            <th> Hinta/kpl  </th>

            </tr>

            <tr>
<td> 
 <select class='varaosaKoko' id='valitsin0' name='id'> 
<option value='47'>18/450 </option> 
<option value='48'>18/600 </option> 
<option value='49'>22/450 </option> 
<option value='50'>22/600 </option> 
 </select> </td> 

                <td> <input id='RTK0' type='text'' name='RTK' value='' readonly> </td> 

                <td> <input type='text' name='amount' id='maara'> </td> 

                <td> <p id=hinta><p></td>
 <tr></table>

这就是Jquery：

$(".varaosaKoko").ready( function () {
        var id = $(this).attr('id');
        var luokka = $(this).attr("class");
        //var parent = $(this).closest('form');

        console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);


    });

然而，它始终将id和class都视为“未定义”。在代码中，如您所见，它们已被定义。

任何人都知道出了什么问题？ HTML是用PHP生成的，因为计划有多个同一个类的形式，所以每个都有自己的标识符作为id的数字。

修改

澄清，因为我忘了这个：

JQuery，完整形式，而不仅仅是我发布的部分，是：

$(document).ready(function(){

 $(".varaosaKoko").ready( function () {
            var id = $(this).attr('id');
            var luokka = $(this).attr("class");
            //var parent = $(this).closest('form');

            console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);


        });

});

Answer 1

您应该准备好使用文档。然后迭代表单并获取他们的id和类：

$(document).ready( function () {
$(".varaosaKoko").each(function(){
    var id = $(this).attr('id');
    var luokka = $(this).attr("class");
    console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);
});});

Answer 2

似乎你的jQuery脚本在表单之上。只需将jQuery脚本放在表单下面即可。或者在结束身体标签之前。

在调用与它们相关的jQuery脚本之前，你的DOM元素应该准备就绪。

undefined表示它实际上没有被定义，或者它是在范围/函数之外定义的，在你的情况下，它是在范围之外定义的（即前向引用问题）

因此，您的网页应如下所示： -

 <html>
    <head></head>
    <body>
    <form class='varaosaTuote' id='lomake0'> 
    <input type='hidden' value='Add' name='Action' id='Toiminto'> 

                <table> <tr> 

                <th> Koko </th>

                <th> RTK    </th>

                <th> Määrä  </th>

                <th> Hinta/kpl  </th>

                </tr>

                <tr>
    <td> 
     <select class='varaosaKoko' id='valitsin0' name='id'> 
    <option value='47'>18/450 </option> 
    <option value='48'>18/600 </option> 
    <option value='49'>22/450 </option> 
    <option value='50'>22/600 </option> 
     </select> </td> 

                    <td> <input id='RTK0' type='text'' name='RTK' value='' readonly> </td> 

                    <td> <input type='text' name='amount' id='maara'> </td> 

                    <td> <p id=hinta><p></td>
     <tr></table> 

     ///

     ///

     </form>

<script type="text/javascript">
     $("select.varaosaKoko").each( function () {
            var id = $(this).attr('id');
            var luokka = $(this).attr("class");        
            console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);


        });
</script>
</body>

$（this）.attr（＆＃39; id＆＃39;）返回undefined，尽管id已定义

2 个答案: