使用jquery单击按钮时如何选择类或ID答案

【问题标题】：how to select a class or id when a button is clicked with jquery使用jquery单击按钮时如何选择类或ID
【发布时间】：2016-09-12 16:50:06
【问题描述】：

我的 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>

在我的html页面上有几个这种类型的div，

我使用 jquery 的 ajax 调用是

$('.downvote').click(function() {
var q_id=$(this).attr('q_id')
console.log(q_id)
$.ajax( {
    type: 'GET',
    url:"http://127.0.0.1:8000/q/downvote/",
    data:q_id,
    success: searchSuccessDown,
    dataType: 'html'
});
});
function searchSuccessDown(data) {
console.log('downvoted successfully');}

我是新手，我的问题是当点击一个反对按钮时（页面上有几个反对按钮）如何选择 id="q_id" 或 class="q_id" 的输入标签对应的 div 与 class= “投票”并通过 ajax 数据传递其值。

【问题讨论】：

你的意思是要把输入的数据通过ajax发布到url？？作为回报，您是否想获取任何数据？？？
您应该将event.preventDefault(); 添加到您的JS代码中，以防止表单提交，而且您没有使用表单来执行此操作..！所以让它也形成..！
你的带有投票类的 div 是否只包含 2 个元素？？
@UmairShahYousafzai - 仅在相关时。在 OP 的情况下，什么都不会提交，所以没有必要。
@Marcus ：确实是这样，但这不是正确的做法，或者是吗？？？

标签： javascript jquery html ajax

【解决方案1】：

一种方法是获取父元素（即投票 div），然后在其中找到 q_id 元素：

var q_id = $(this).parent().find('.q_id').val();

这是一个快速的小提琴： https://jsfiddle.net/1m56g6jL/

【讨论】：

【解决方案2】：

这正是你应该如何做的：

HTML：

<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>

JavaScript：

<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>

【讨论】：

【解决方案3】：

这样做：

...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...

});

【讨论】：