多種形式，獲取輸入值

該頁面的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

多種形式，獲取輸入值

回答

相關問題