Question

我的应用程序列表中有一些按钮，其中包含一些我喜欢的项目。我在这里使用id选择器。我想将id选择器与item的ID一起使用-使ID选择器唯一。

我如何获取商品ID并将其连接到ID选择器以实现此结果？ 1.＃voteup-2 2.＃voteup-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 type="submit" id="voteup-{{ answer.id }}"...

您可以使用starts with selector捕获id以已知值开头的所有按钮。像这样：

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

这将处理其<button>以id开头的所有"voteup-"元素的单击。

Answer 2

另一种选择是为按钮分配一个类。

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

我已经将按钮HTML简化为仅用于说明这一点的类。您可以选择“ btn-vote”类。 jQuery选择器随后变为

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

我如何获得与商品ID连接的ID选择器

2 个答案: