2017-02-09 77 views
2

所以我的代碼是這樣的: -如何檢測jQuery中哪個按鈕元素被點擊在一個PHP循環內?

for($i=0;$i<$length;$i++){ 
?> 
<div id="scoreDiv"> 
    <input type="text" name="myscore" placeholder="Enter your score" required> 
    <input type="text" name="oppoScore" placeholder="Your opponent score" required> 
    <input id="submitScore" type="submit" value="submit" > 
</div> 
<?php 
} 
?> 

Jquery我想檢測被點擊,並基於該按鈕,我想利用用戶輸入的輸入欄的按鈕。

+1

使用'帶班 – guradio

+0

''ID背景this'提交需要轉換爲'類',然後使用'jquery this' –

+1

它的工作。感謝很多 –

回答

2

你可以像下面(一個例子): -

$(document).ready(function(){ 
 
    $('.submitScore').click(function(e){ 
 
     e.preventDefault(); 
 
     alert($(this).prev().attr('name')); 
 
    
 
    }); 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="scoreDiv"> 
 

 
       <input type="text" name="myscore" placeholder="Enter your score" required> 
 
       <input type="text" name="oppoScore" placeholder="Your opponent score" required> 
 
       <input class="submitScore" type="submit" value="submit" > 
 

 
     </div> 
 
<div id="scoreDiv"> 
 

 
       <input type="text" name="myscore1" placeholder="Enter your score1" required> 
 
       <input type="text" name="oppoScore1" placeholder="Your opponent score1" required> 
 
       <input class="submitScore" type="submit" value="submit" > 
 

 
     </div>

注: - class作爲組選擇處理,而id被視爲個人 - 選擇器Jquery。感謝

1

你可以嘗試類似下面:

$(function(){ 
 

 
    $(".js-btn").on("click",function(){ 
 
     var btn = $(this); 
 
     var txtBoxes = btn.siblings('input'); 
 
     console.log($(txtBoxes[0]).val()); 
 
     console.log($(txtBoxes[1]).val()); 
 
    }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="scoreDiv"> 
 
    <input type="text" name="myscore" placeholder="Enter your score" required> 
 
    <input type="text" name="oppoScore" placeholder="Your opponent score" required> 
 
    <input id="submitScore" type="submit" value="submit" class="js-btn" > 
 
</div> 
 
<div id="scoreDiv"> 
 
    <input type="text" name="myscore" placeholder="Enter your score" required> 
 
    <input type="text" name="oppoScore" placeholder="Your opponent score" required> 
 
    <input id="submitScore" type="submit" value="submit" class="js-btn" > 
 
</div> 
 
<div id="scoreDiv"> 
 
    <input type="text" name="myscore" placeholder="Enter your score" required> 
 
    <input type="text" name="oppoScore" placeholder="Your opponent score" required> 
 
    <input id="submitScore" type="submit" value="submit" class="js-btn" > 
 
</div> 
 
<div id="scoreDiv"> 
 
    <input type="text" name="myscore" placeholder="Enter your score" required> 
 
    <input type="text" name="oppoScore" placeholder="Your opponent score" required> 
 
    <input id="submitScore" type="submit" value="submit" class="js-btn" > 
 
</div>

0

由於ID應該是唯一的,使用類屬性,而不是ID和嘗試下面的代碼:

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="application/javascript"> 
    $(document).ready(function() { 
     $('.submitScore').on('click',function() { 
      var div_el = $(this).parent('.scoreDiv'); 
      var myscore = div_el.find('input[name="myscore"]').val(); 
      var oppoScore = div_el.find('input[name="oppoScore"]').val(); 

      alert(myscore+'----'+oppoScore); 
      return false; 
     }) 
    }); 
</script> 
</head> 





<?php 
for($i=0;$i<5;$i++){ 
?> 
<div class="scoreDiv"> 

<input type="text" name="myscore" placeholder="Enter your score" required> 
<input type="text" name="oppoScore" placeholder="Your opponent score" required> 
<input class="submitScore" type="submit" value="submit" > 

</div> 
<?php 
} 
?>