Javascript 如何基于onclick函数获取两个输入字段值

我在这个div中有一个div，我有两个输入字段和更新按钮，如下所示：

<button type = "button" id = "add-botton" >Add Element </button>
    <div id = "trace-div1" class = "trace">
    <h4><span>Trace 1</span></h4>
    <form>
        <table>
            <tbody>
                <tr>
                    <td><label>X Axis:  </label></td>
                    <td><input type="text" name="t_x_axis" class = "t_x_axis"  id="x_axis_t1" size="50"> 
                    </td>                                               
               </tr>                                                                            
               <tr>
                    <td><label>Y Axis:  </label></td>
                    <td><input type="text" name="t_y_axis" class = "t_y_axis" id="y_axis_t1" size="50"></td>
                    <td><button type = "button" name = "update-button-trace" class = "update-trace" id = 
                         "update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
                </tr>
         </tbody>
        </table>
       </form>                              
    </div>
    <script>
    $(document).ready(function(){
        $('#add-botton').click(function(){
              var $div = $('div[id^="trace-div"]:last');
              var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
              var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
               $trace1div.find('span').text('Trace ' + num);
               $trace1div.find("input[name='t_x_axis']").attr("id", "x_axis_t"+num).val("");
               $trace1div.find("input[name='t_y_axis']").attr("id", "y_axis_t"+num).val("");
               $trace1div.find("button[name='update-button-trace']").attr("id", "update-button - 
             trace"+num);
              $div.after( $trace1div);


                });
        });
    function updatebtn(el){
            var id = $(el).attr('id');
    }
    }
</script>

添加元素
踪迹1
X轴：
Y轴：
更新
$（文档）.ready（函数（）{
$（'#add boton'）。单击（函数（）{
var$div=$（'div[id^=“trace div”]：last'）；
var num=parseInt（$div.prop（“id”）.match（/\d+/g），10）+1；
var$trace1div=$div.clone（true）.prop（'id'，'trace div'+num）；
$trace1div.find（'span'）.text（'Trace'+num）；
$trace1div.find（“输入[name='t\u x\u axis']”）.attr（“id”，“x\u axis\u t”+num）.val（“”）；
$trace1div.find（“输入[name='t\u y\u axis']”）.attr（“id”，“y\u axis\u t”+num）.val（“”）；
$trace1div.find（“按钮[name='update-button-trace']”）.attr（“id”，“更新按钮-
道“+num）；
$div.after（$trace1div）；
});
});
函数更新bTN（el）{
var id=$（el.attr（'id'）；
}
}

在这里，我使用diff.id多次克隆我的div，我的问题是当我单击更新按钮时，我需要这两个相应的输入值。 我试着这样做，但在这里我得到了所有的输入值，就像我加了3个div，这些相应的所有值来到这里，每个div有2个输入字段：

<script>
 function updatebtn(el){
       var id = $(el).attr('id');
       $('input[type=text]:visible').each(function(){
                 console.log($(this).val());
        })
})
</script>

函数更新bTN（el）{
var id=$（el.attr（'id'）；
$（'input[type=text]：visible'）。每个（函数（）{
log（$（this.val（））；
})
})

---

谢谢

您需要使用DOM遍历来查找与单击的按钮相关的

输入

元素。考虑到您已经在使用jQuery，最简单的方法是为动态

按钮
元素以及
最近的（）
和
查找（）
使用委派事件处理程序

还值得注意的是，在动态内容中使用
id
属性所产生的问题远远多于它所解决的问题。我强烈建议您将它们全部删除，并在所有元素上使用公共类。这样，您就不必在添加新内容时手动更新所有增量ID

试试这个：


jQuery（函数（$）{
变量$traceContainer=$（“#traces”）；
$（“#添加按钮”）。单击（函数（）{
var$div=$traceContainer.find（'.trace:last'）.clone（）
$div.find（“输入[name='t_x_轴']”）val（“”）；
$div.find（“输入[name='t_y_轴']”）val（“”）；
$traceContainer.append（$div）；
$div.find（'span'）.text（'Trace'+（$div.index（）+1））；
});
$traceContainer.on（'click'，'update trace'，function（））{
var$container=$（this）.closest（'table'）；
var xAxis=$container.find（'input[name=“t_x_axis”]”）。val（）；
var yAxis=$container.find（'input[name=“t_y_axis”]'）.val（）；
console.log（xAxis，yAxis）；
});
});

添加元素
踪迹1
X轴：
Y轴：
更新
您需要使用DOM遍历来查找与单击的按钮相关的
输入
元素。考虑到您已经在使用jQuery，最简单的方法是为动态
按钮
元素以及
最近的（）
和
查找（）
使用委派事件处理程序

还值得注意的是，在动态内容中使用
id
属性所产生的问题远远多于它所解决的问题。我强烈建议您将它们全部删除，并在所有元素上使用公共类。这样，您就不必在添加新内容时手动更新所有增量ID

试试这个：


jQuery（函数（$）{
变量$traceContainer=$（“#traces”）；
$（“#添加按钮”）。单击（函数（）{
var$div=$traceContainer.find（'.trace:last'）.clone（）
$div.find（“输入[name='t_x_轴']”）val（“”）；
$div.find（“输入[name='t_y_轴']”）val（“”）；
$traceContainer.append（$div）；
$div.find（'span'）.text（'Trace'+（$div.index（）+1））；
});
$traceContainer.on（'click'，'update trace'，function（））{
var$container=$（this）.closest（'table'）；
var xAxis=$container.find（'input[name=“t_x_axis”]”）。val（）；
var yAxis=$container.find（'input[name=“t_y_axis”]'）.val（）；
console.log（xAxis，yAxis）；
});
});

添加元素
踪迹1
X轴：
Y轴：
更新
您可以使用find value作为
$div.find（'.t_y_轴'）.val（）


$（文档）.ready（函数（）{
$（'#add boton'）。单击（函数（）{
var$div=$（'div[id^=“trace div”]：last'）；
var num=parseInt（$div.prop（“id”）.match（/\d+/g），10）+1；
var$trace1div=$div.clone（true）.prop（'id'，'trace div'+num）；
$trace1div.find（'span'）.text（'Trace'+num）；
$trace1div.find（“输入[name='t\u x\u axis']”）.attr（“id”，“x\u axis\u t”+num）.val（“”）；
$trace1div.find（“输入[name='t\u y\u axis']”）.attr（“id”，“y\u axis\u t”+num）.val（“”）；
$trace1div.find（“button[name='update-button-trace']”）attr（“id”，“update button trace”+num）；
$div.after（$trace1div）；
log（'last t t_y_axis=>'，$div.find（'t_y_axis'）.val（））；
function updatebtn(el) {
      var x1 = document.getElementById('x_axis_t1');      
      var y1 = document.getElementById('y_axis_t1');

      alert('x-axis is ',x1.value, ' and y-axis is', y1.value)

    }

 function updatebtn(el){
        var element = $(el),
            parent_table = element.parentsUntil('table');
        x_axis = parent_table.find('.t_x_axis').val();
        y_axis = parent_table.find('.t_y_axis').val(); 
}