JQuery：從多個同名ID的keypress獲取jquery val

希望有人能幫助解決這個問題。我有一個PHP的foreach運行，在那裏我得到多個acticles從數據庫：JQuery：從多個同名ID的keypress獲取jquery val

@foreach ($articles as $article) 
    <div class="article">  
     <input id="comment" type="text" class="materialize-textarea" placeholder="Add comment"/> 
    </div> 
@endforeach

比方說，我在數據庫中有2篇或更多的文章。所以在HTML端div得到重複，我有多個div具有相同的ID。

接下來我想讓jquery獲得輸入值。這裏的示例代碼

$("#comment").each(function() 
{ 
      $(this).keypress(function(e) 
       {if (e.which == 13) 
        alert('works'); 
       }); 
});

結果：它完美的第一條記錄從數據庫（第一條）拉。在第二篇文章中，JavaScript並沒有觸發。我明白這是因爲jQuery只讀取第一個div。我在網上查了一些解決方案，但沒有真正爲我工作。最合乎邏輯的解決方案似乎是將這些功能放在每個位置。但結果是一樣的。第一篇文章完美地觸發了JavaScript，其餘則沒有。

注意：如果php代碼看起來很奇怪，請忽略它，它在laravel框架上。儘管如此，它正確執行。此處介紹的代碼僅顯示應用程序的邏輯，而不是實際的代碼。

來源

2016-06-14 Shavkat

'帶有相同ID的多個div' *** ID應始終是唯一的***使用class代替 – guradio

id屬性應該是唯一的，因爲它用於唯一標識元素。 id選擇器僅選擇具有id的第一個元素，因此使用class代替元素組。

@foreach ($articles as $article) 
    <div class="article">   
     <input class="comment" type="text" class="materialize-textarea" placeholder="Add comment"/> 
     <!-------^---- set class instead of `id` ---------------------------------------------------> 
    </div> 
@endforeach

那麼就沒有必要使用each()，只是keypress()事件處理程序直接綁定到選擇對它們進行迭代。

$(".comment").keypress(function(e){ 
//-^-------- class selector 
    if (e.which == 13) 
     alert('works'); 
});

來源

2016-06-14 04:06:29

嗯。這比我想象的容易。非常感謝@Pranav。你救了我 – Shavkat

@ Shavkat：很高興幫助你:) –

對不起另一個問題。所以爲了進一步分配輸入值到一個變量。它看起來像現在這樣$（「。comment」）。keypress（function（e）{if} ===） var content = $（「。comment」）.val（）; }）;同樣的事情正在發生。它只分配第一篇文章的價值。其餘的值爲空 – Shavkat

HTML：

@foreach ($articles as $article) 
    <div class="article">  
     <input id="comment" type="text" class="materialize-textarea commentArea" placeholder="Add comment"/> 
    </div> 
@endforeach

的Javascript：

$(".commentArea").each(function(){ 
    $(this).keypress(function(e){ 
     if(e.which == 13){ 
     alert("OK"); 
     } 
    }); 
});

我們不能用同樣的IDs.Can使用的名稱或class.Using類是最好的方式。

來源

2016-06-14 04:07:15

謝謝@阿魯納。 – Shavkat

JQuery：從多個同名ID的keypress獲取jquery val

回答

相關問題