Получение координат при установке флажка

#javascript #jquery #html #twig

#javascript #jquery #HTML #веточка

Вопрос:

итак, я делаю эту школьную штуку, и я пытаюсь получить координаты 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>

Ответ №1:

 $(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 %}

1. jquery добавлен во фрагмент?

2. Это хороший момент. Ну, я не использую ванильный JS, поэтому, возможно, тогда кто-то другой сможет дать чистый JS-ответ

3. Кажется, теперь OP добавил тег jQuery, так что проблема решена.

4. Действительно извините за теги

Ответ №2:

Более эффективной реализацией было бы использование .on для повышения производительности

При использовании .on у вас есть только один прослушиватель событий, обрабатывающий любой щелчок, в отличие от прослушивателя событий для каждого поля ввода (с классом pos-input ) в DOM.

 $(function() {
    $('table').on('click', '.pos-input', function(e){
        var targ = $(e.target);
        if(targ.is(":checked")){
    	    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 %}