多种形式，获取输入值

该页面的HTML如下：多种形式，获取输入值

<div class="list-block media-list"> 
    <ul> 
     <form method="post" action=""> 
      <li > 
       <div class="item-content"> 
        <div class="item-media"> 
         <img width="80"> 
        </div> 
        <div class="item-inner"> 
         <div class="item-title-row"> 
          <div class="item-title">Element title</div> 
          <div class="item-after">Unexcused</div> 
         </div> 
         <div class="item-subtitle">Subtitle</div> 
         <div class="item-text">Additional description text</div> 
        </div> 
       </div> 

      </li> 
      <input type="hidden" name="status" id="status" value="" /> 
      <input type="hidden" name="client_id" id="client_id" value="23" /> 
     </form> 
     <form method="post" action=""> 
      <li class="red"> 
       <div class="item-content"> 
        <div class="item-media"> 
         <img width="80"> 
        </div> 
        <div class="item-inner"> 
         <div class="item-title-row"> 
          <div class="item-title">Element title</div> 
          <div class="item-after">Excused</div> 
         </div> 
         <div class="item-subtitle">Subtitle</div> 
         <div class="item-text">Additional description text</div> 
        </div> 
       </div> 

      </li> 
      <input type="hidden" name="status" id="status" value="" /> 
      <input type="hidden" name="client_id" id="client_id" value="27" /> 
     </form> 
    </ul> 
</div>

这里是JS：

$(document).ready(function() { 
    $('.media-list li').on('click', function() { 
     var buttonValue = $(this).closest('#client_id').prop("value"); 
     alert(buttonValue); 
    }); 
});

当我点击<li>它应该以提醒client_id的价值，但它始终是23，如果我点击第一个<li>，这是正确的数字。有没有其他方法可以解决这个问题？

来源

2014-09-03 tomirons

HTML ID应该是唯一的 – 2014-09-03 13:06:17

**和**'.closest （）''做了你想做的事情:('。（'。child'）。closest（'。parent'）'返回匹配选择器'.parent'的'.child'的第一个祖先，如果有的话 – PeterKA 2014-09-03 13:09:04

ID应该是唯一的，你可以在这里使用属性值选择。也可使用.val()来获取输入类型的值：

$(this).closest('form').find("[name=client_id]").val();

来源

2014-09-03 13:11:14

这很好！谢谢！我会在大约8分钟内将你的答案标记为答案。 – tomirons 2014-09-03 13:13:08

@ Hulu8004：很高兴帮助:) – 2014-09-03 13:14:19

在HTML中，id should be unique。在你的情况下，你可以得到父窗体并找到它的id。也遵循标准模板像<ul><li>template</li></ul>

试试看

$(this).parents('form:first').find('#client_id').val()

来源

2014-09-03 13:08:06

'最接近'比使用'父母'和'第一个'过滤器更可取（更可读）。 :) – 2014-09-03 13:17:29

您不应该重复ID;这导致HTML无效。使用CSS类来代替，或者使用name选择hidden表单元素：

$(this).closest('form').find('input[name=client_id]').val();

或与您的HTML改为：

 <input type="hidden" name="status" class="status" value="" /> 
     <input type="hidden" name="client_id" class="client_id" value="27" />

你的JS是：

$(this).closest('form').find('.client_id').val();

来源

2014-09-03 13:13:26 PeterKA

我并没有尝试复制ID，它只是在提醒同一个ID。 – tomirons 2014-09-03 13:14:49

是的，因为'$（this）。最接近（'＃client_id'）'不会做你认为它正在做的事情：在评论部分查看我的评论。 – PeterKA 2014-09-03 13:19:47

jQuery的ISN对于这样的基本代码来说，这是最好的选择。

但是，如果你确实需要的jQuery，你可以这样做：

$(this).parent().find('[name=client_id]').val();

但是，如果你不担心jQuery和，如果你关心性能，你可以使用这个：

(this.parentNode.getElementsByTagName('input')[1]||{value:undefined}).value;

如果订单更改，最新版本将不起作用。

或者你可以尝试（不包括jQuery的未经检验的解决方案和更短）：

this.parentNode.elements.client_id.value;

文件：http://www.javascript-coder.com/javascript-form/javascript-get-form.phtml

来源

2014-09-03 13:28:28

多种形式，获取输入值

回答

相关问题