Javascript jQuery选择按钮旁边的隐藏输入值_Javascript_Jquery_Button_Jquery Selectors

Javascript jQuery选择按钮旁边的隐藏输入值

javascript jquery button

Javascript jQuery选择按钮旁边的隐藏输入值,javascript,jquery,button,jquery-selectors,Javascript,Jquery,Button,Jquery Selectors,我有一份物品清单。我希望能够单击一个按钮将项目添加到mySQL。测试时，我只有conf框来显示ID。问题是我无法让它工作。我不熟悉jQuery和AJAX。我认为这很容易。但是在一个上午尝试了一系列不同的方法之后，我想我会问一下我的确切代码 <page loaded with> wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); wp_enqueue_script('jquery-ui-tabs'); wp

我有一份物品清单。我希望能够单击一个按钮将项目添加到mySQL。测试时，我只有conf框来显示ID。问题是我无法让它工作。我不熟悉jQuery和AJAX。我认为这很容易。但是在一个上午尝试了一系列不同的方法之后，我想我会问一下我的确切代码

<page loaded with>
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-tabs');
wp_enqueue_script('jquery-ui-autocomplete');

<script>
function addCharItem () {
    var itemID = $(this).closest("td").find('input[name="itemID"]').val(); //this is close (I think) but message is showing as undefined.
//  var itemID = $("input").siblings(".itemID").val() //gets first ID in table only
    confirm ('The item ID is ' + itemID); 
//adding ajax and other stuff later.  
}
</script>

<html>
...
<tr>
  <td colspan="5"><dl><dt>Backpack (empty)</dt><dd></dd></dl></td>
  <td><input name="hdnItemID" type="hidden" value="742"/>
      <input name="btnAddItem" type="button" id="btnAddItem" value="+" onclick="addCharItem ()"/></td>
  <td><input name="btnBuyItem" type="button" id="btnBuyItem" value="$" /></td>
 </tr>
 ...
</html>


wp_排队_脚本（'jquery'）；
wp_排队_脚本（'jquery-ui-core'）；
wp_排队_脚本（'jquery-ui-tabs'）；
wp_排队_脚本（'jquery-ui-autocomplete'）；
函数addCharItem（）{
var itemID=$（this）.closest（“td”）.find（'input[name=“itemID”]'）.val（）；//这很接近（我想），但消息显示为未定义。
//var itemID=$（“input”）.sides（.itemID”）.val（）//仅获取表中的第一个ID
确认（'项目ID为'+项目ID）；
//稍后添加ajax和其他内容。
}
...
背包（空的）
...

这都是从Wordpress中的php页面模板构建的。我不认为这些事情有什么奇怪之处。但如果有，请告诉我您还需要什么。谢谢你的帮助和建议。我知道我一定错过了一些小东西，我只是还不知道这是什么。

你可以使用

。兄弟姐妹（选择器）

或

使用

hdnItemID

作为您的姓名，而不是

itemID

$(this).closest("td").find('input[name="hdnItemID"]').val();

因此，出于某种原因，上面的代码似乎没有捕获HTML元素。因此，我实现了jQuery按钮

<script>
  $(function() {
    $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
        var thisValue = $(this).val(); //to distinguish buttons
        console.log(thisValue);
        var itemID = $(this).prev('input[id="hdnItemID"]').val()
        confirm ('The item ID is ' + itemID);
            //do other stuff
      });
  });
</script>

<html changes>
...
<tr>
  <td colspan="5"><dl><dt>Backpack (empty)</dt><dd></dd></dl></td>
  <td><input class="itemID" id="hdnItemID" type="hidden" value="742"/>
    <input type="submit" value="+" /></td>
  <td><input class="itemID" id="hdnItemID" type="hidden" value="742"/>
    <input type="submit" value="$" /></td></tr>
...
</html>


$（函数（）{
$（“输入[type=submit]，一个按钮”）
.按钮（）
。单击（功能（事件）{
event.preventDefault（）；
var thisValue=$（this）.val（）；//用于区分按钮
console.log（thisValue）；
var itemID=$（this.prev（'input[id=“hdnItemID”]”）val（）
确认（'项目ID为'+项目ID）；
//做其他事情
});
});
...
背包（空的）
...

我希望我能告诉你为什么它不起作用。看来我已经尝试了很多本该有效的方法。上述建议也应该奏效。如果有人知道为什么会这样，请告诉我。一、我相信还有其他人，他们很想知道这个“抓住你了”的问题。谢谢所有的提示

到目前为止没有运气。我添加了以下内容：var thisValue=$（this）；console.log（thisValue）；看看这是什么选择。它在控制台中返回这个：[窗口，jquery:“1.9.1”，构造函数：函数，初始化：函数，选择器：，，大小：函数…]它不应该有选择器吗？它正在显示“”。也许这就是问题所在。为什么“this”不能抓住当前元素？

$(this).closest("td").find('input[name="hdnItemID"]').val();

<script>
  $(function() {
    $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
        var thisValue = $(this).val(); //to distinguish buttons
        console.log(thisValue);
        var itemID = $(this).prev('input[id="hdnItemID"]').val()
        confirm ('The item ID is ' + itemID);
            //do other stuff
      });
  });
</script>

<html changes>
...
<tr>
  <td colspan="5"><dl><dt>Backpack (empty)</dt><dd></dd></dl></td>
  <td><input class="itemID" id="hdnItemID" type="hidden" value="742"/>
    <input type="submit" value="+" /></td>
  <td><input class="itemID" id="hdnItemID" type="hidden" value="742"/>
    <input type="submit" value="$" /></td></tr>
...
</html>