Javascript 使用jquery单击按钮时如何选择类或id

Javascript 使用jquery单击按钮时如何选择类或id,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我与class=vote的div是 <div class="vote"> <input type="hidden" name="q_id" class="q_id" id="q_id" q_id="{{ result.object.id }}" value="{{ result.object.id }}"> <button type="submit" class="downvote" value="downvote">downvote</button&g

我与class=vote的div是

<div class="vote">
<input type="hidden" name="q_id" class="q_id" id="q_id" q_id="{{ result.object.id }}" value="{{ result.object.id }}">
<button type="submit" class="downvote" value="downvote">downvote</button>
我是新手,我的问题是当点击下一票按钮时,页面上有几个下一票按钮,如何为class=vote的相应div选择id=q_id或class=q_id的输入标签,并通过ajax数据传递其值。

这样做:

...click(function (e) {

var qIdNode = $(e.target)
.closest(".vote") // navigates to the closest parent that have the class vote
.find('.q_id'); // then finds the sibling q_id element of the target/clicked element...

});

下面是您应该如何做的:

HTML:

JavaScript:


一种方法是获取作为投票div的父元素,然后在其中找到q_id元素:

var q_id = $(this).parent().find('.q_id').val();
这里有一把快速小提琴:

您的意思是希望通过ajax将输入数据发布到url??作为回报,您是否希望获取任何数据???您应该添加event.preventDefault;你的JS代码,以防止表单提交,而且你没有使用表单来做这件事。。!所以,让它的形式也。。!您的div with vote类是否只包含2个元素??@UmairShahYousafzai-仅当相关时。在OP的情况下,没有任何东西会提交,所以它是不必要的。@Marcus:是的,确实如此,但这不是正确的方式,或者是吗???
<div class="vote">
<form method="post" action="" id="downvote_form">
<input type="hidden" name="q_id" class="q_id" id="q_id" q_id="{{ result.object.id }}" value="{{ result.object.id }}">
<button type="submit" class="downvote" value="downvote">downvote</button>
</form>
<script>
$(document).ready(function() {
        $('#downvote_form').on('submit', function(e) {
                $.ajax({
                        url: 'http://127.0.0.1:8000/q/downvote/',
                        data: $(this).serialize(),
                        type: 'POST',
                        success: function(data) {
                            if (data == "success") {
                                console.log(data);
                                window.location.href = "success.php"; //=== Show Success Message==
                            }
                        },
                        error: function(data) {
                            alert("You have an error); //===Show Error Message====
                            }
                        }); e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
                });
        });
</script>
var q_id = $(this).parent().find('.q_id').val();