Как я могу связать селектор идентификатора с идентификатором элемента

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

Как я могу получить идентификатор элемента и подключить его к селектору идентификатора для этого результата? 1. #голосуп-2 2. #voteup-раздел-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.info($('#voteup-section').html(response['form']))
                        },
                        error: function(rs, e){
                            console.info(rs.responseText);
                        },
                    });
                });
            });
        </script>

Кнопка в html-части, здесь у меня есть селектор id с 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>

Проблема на стороне клиента, почему бы не показать код на стороне клиента?

Teemu 25.01.2019 23:27
Я хотел бы использовать селектор идентификаторов с идентификатором элемента, чтобы сделать селектор идентификаторов уникальным. Именно так вы используете селекторы на основе id.
Scott Marcus 25.01.2019 23:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
120
2

Ответы 2

Вы просто имеете в виду, что хотите, чтобы ваш обработчик кликов работал для всех этих элементов?:

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

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

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

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

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

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

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

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

Другие вопросы по теме