Как я могу получить селектор идентификатора, связанный с идентификатором предмета

Question

У меня есть список кнопок в списке приложений с элементами, которые мне могут понравиться. Я использую здесь id селектор. Я хотел бы использовать селектор идентификатора с идентификатором элемента - чтобы сделать селектор идентификатора уникальным.

Как я могу получить идентификатор элемента и подключить его к идентификатору селектора для этого результата? 1. # voiceup-2 2. # pollup-section-2

Я пытался использовать data-id

Вот моя часть jquery:

        <script type="text/javascript">
            $(document).ready(function(event){
                $(document).on('click', '#voteup', function(event){
                    event.preventDefault();
                    var pk = $(this).attr('value');
                    $.ajax({
                        type: 'POST',
                        url: "{% url 'qa:answer_voteup' %}",
                        data: {'id': pk, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                        dataType: 'json',
                        success: function(response){
                            $('#voteup-section').html(response['form'])
                            console.log($('#voteup-section').html(response['form']))
                        },
                        error: function(rs, e){
                            console.log(rs.responseText);
                        },
                    });
                });
            });
        </script>

Кнопка в HTML-части, здесь у меня есть селектор идентификатора с voteup-section-{{ answer.id }}

<div id="voteup-section-{{ answer.id }}" data-id="{{ answer.id }}">
    <form action="{% url 'qa:answer_voteup' %}" method="post">
    {% csrf_token %}
    <button type="submit" id="voteup-{{ answer.id }}" name="answer_id" value="{{ answer.id }}" {% if is_voted_up %} class="btn btn-danger btn-sm">Voted up! {% else %} class="btn btn-primary btn-sm">Vote up!{% endif %} <span class="badge badge-light">{{ answer.total_vote_up }}</span></button>
    </form>
</div>

Answer 1

Другой вариант - назначить класс кнопкам.

<button ... class="btn btn-danger btn-sm btn-vote" ...>Vote up!</button>

Я упростил HTML кнопки только до класса, чтобы проиллюстрировать эту точку.Класс "btn-голосования" может быть любым на ваш выбор.Селектор jQuery становится

$(document).on('click', 'button.btn-vote', function(event){
    //...
}

Answer 2

Вы хотите сказать, что обработчик кликов должен работать для всех этих элементов?

<button type="submit" id="voteup-{{ answer.id }}"...

Вы можете использовать начинается с селектора , чтобы захватить все кнопки, где id начинается с известного значения. Примерно так:

$(document).on('click', 'button[id^="voteup-"]', function(event){
    //...
});

Это обработает щелчок для всех элементов <button> в документе, где их id начинается с "voteup-".