확인란을 선택하면 좌표를 얻습니다.

Question

그래서 저는이 학교 일을하고 있습니다. 그리고 체크 된 루프 된 체크 박스의 x와 y 좌표를 가져 와서 각각의 입력 상자에 X와 Y 좌표를 표시하려고합니다. 이 시점에서 나는 내가하는 일을 실제로 알지 못하기 때문에 도움이 필요하다.

html.twig.

{% set cells = 10 %} 
<div class="large-12"> 
<div class="large-6 columns"> 
    <h6>Your Board</h6> 
    <table id="yours" class="ocean">  
     {% for i in 1..cells %} 
      <tr class="rowDiv"> 
       {% for j in 1..cells %} 
        <td id="{{i}}col_{{j}}" rel="{{j}}" class="cell colDiv 
         {% for placement in yourships %} 
          {% for cell in placement %} 
           {% if cell.x_pos == i and cell.y_pos == j %} 
            {% if cell.hit == "hit" %} 
             hit 
            {% else %} 
             {{cell.class}} 
            {% endif %}  
           {% endif %} 
          {% endfor %} 
         {% endfor %} 
         ">          
         <input class="pos-input" name="position" type="checkbox" value="{{j}}"/> 
        </td> 
       {% endfor %}  
      </tr> 
     {% endfor %} 
    </table> 
    <div class="large-12"> 
     <div class="large-3 columns"> 
      Y:<input type="text"/> 
     </div> 
     <div class="large-3 columns"> 
      x:<input type="text"/> 
     </div> 
     <div class="large-3 columns"> 
      <select> 
       <option>select</option> 
       <option>hit</option> 
       <option>miss</option> 
      </select> 
     </div> 
     <div class="large-3 columns"> 
      <button>Initiate</button> 
     </div>  
    </div> 
</div> 
<script> 
$('.chooser').click(function(){ 
$(this).removeClass('invisible'); 
var innerCheck = $(this).find('input[type=checkbox]') 
innerCheck.prop('checked', true); 

}); 
</script> 

Answer 1

보다 효율적인 구현은, 이벤트 리스너에 대한, 당신은 하나의 이벤트 리스너가 어떤 클릭을 처리 한 .on를 사용하여 성능을

을 개선하기 위해 .on를 사용하는 것 DOM의 모든 입력 상자 (클래스 pos-input 포함)에 대해 그 시합 죄송합니다

$(function() { 
 
    $('table').on('click', '.pos-input', function(e){ 
 
     var targ = $(e.target); 
 
     if(targ.is(":checked")){ 
 
    \t  alert(targ.x + ", " + targ.dataset.y); 
 
     } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
{% set cells = 10 %} 
 
.... 
 
{% for i in 1..cells %} 
 
      <tr id="{{i}}" class="rowDiv"> 
 
       {% for j in 1..cells %} 
 
        <td id="{{i}}col_{{j}}" rel="{{j}}" class="cell colDiv chooser invisible 
 
         {% for placement in yourships %} 
 
          {% for cell in placement %} 
 
           {% if cell.x_pos == i and cell.y_pos == j %} 
 
             hit 
 
           {% else %} 
 
             no-ship  
 
           {% endif %} 
 
          {% endfor %} 
 
         {% endfor %}        
 
         "> 
 
         <input class="pos-input" name="position" type="checkbox" data-x="{{ j }}" data-y="{{ i }}" /> 
 
        </td> 
 
       {% endfor %}  
 
      </tr> 
 
{% endfor %}

Answer 2

$(function() { 
 
    $('.pos-input').on('click', function() { 
 
     if ($(this).is(':checked')) alert($(this).data('x')+':'+ $(this).data('y')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
{% set cells = 10 %} 
 
.... 
 
{% for i in 1..cells %} 
 
      <tr id="{{i}}" class="rowDiv"> 
 
       {% for j in 1..cells %} 
 
        <td id="{{i}}col_{{j}}" rel="{{j}}" class="cell colDiv chooser invisible 
 
         {% for placement in yourships %} 
 
          {% for cell in placement %} 
 
           {% if cell.x_pos == i and cell.y_pos == j %} 
 
             hit 
 
           {% else %} 
 
             no-ship  
 
           {% endif %} 
 
          {% endfor %} 
 
         {% endfor %}        
 
         "> 
 
         <input class="pos-input" name="position" type="checkbox" data-x="{{ j }}" data-y="{{ i }}" /> 
 
        </td> 
 
       {% endfor %}  
 
      </tr> 
 
{% endfor %}