javascript - 如何从以下代码中的众多类似按钮中选择被单击的按钮？

Question

我正在尝试对评论实现投票赞成/反对功能。

为此，我在每个评论中放置了两个按钮。使用 jQuery 的each() 和 click() 函数，我尝试获取被单击的按钮的 id，向另一个页面触发 ajax 请求，然后使用 success() 回调禁用该特定评论的向上/向下投票按钮.

为了初步验证它是否有效，我仅在两个评论(即 4 个按钮)上尝试此操作，然后禁用其中的一对特定按钮，无论单击哪个按钮。

我尝试了 3-4 种不同的选择器查询，但唯一有效的方法是我专门传递我单击的按钮的确切 id 属性值。我需要以一般方式在具有多个评论及其按钮的页面上实现此功能!!

这是我尝试使用 jQuery 的 HTML 代码的一部分:

<section class="section content">

            <div class="content-wrapper">
                <div class="zone-content equalize zone clearfix">
                    <div class="content-container container-16">
                        <div class="comments block">
                            <div class="block-title-2">
                                <h2>Comments on Place X</h>
                            </div>
                            <div class="review-messages">

                                <div class="review first">
                                    <div class="review-author">
                                        <b>
                                            <span class="author">John</span> - <span class="date">April 10, 2013 at 7:34 pm</span>
                                        </b>
                                    </div>
                                    <br>
                                    <div class="review-text">
                                        Best place to have abcdef food in yyyyy. !!!
                                    </div>
                                    <br>
                <!-- xxxxxxx SELECT ONE OF THESE TWO -->   <button class="btn btn-circle btn-success" id="test_id_1"><i class="glyphicon glyphicon-thumbs-up"></i></a></button>
                <!-- xxxxxxx SELECT ONE OF THESE TWO -->  <button class="btn btn-circle btn-danger" id="test_id_2"><i class="glyphicon glyphicon-thumbs-down"></i></a></button>
                                </div>

                                <div class="review last">
                                    <b>
                                        <div class="review-author">
                                            <span class="author">John</span> - <span class="date">April 10, 2013 at 7:34 pm</span>
                                        </div>
                                    </b>
                                    <br>
                                    <div class="review-text">
                                        <p id="text1">Great xxxx and a good place to yyyy :)</p>
                                    </div>
                                    <br>
                <!-- xxxxxxx SELECT ONE OF THESE TWO -->    <button class="btn btn-circle btn-success" id="test_id_3"><i class="glyphicon glyphicon-thumbs-up"></i></a></button>
                <!-- xxxxxxx SELECT ONE OF THESE TWO -->   <button class="btn btn-circle btn-danger" id="test_id_4"><i class="glyphicon glyphicon-thumbs-down"></i></a></button>
                                </div>
                            </div>
                            <div class="comment-message">
                                <div class="comment-message-title">
                                    Leave a <span class="text-colorful">Comment</span>
                                </div>
                                <form class="comment-message-form">
                                    <textarea class="text-input-grey comment-message-main" placeholder="Your Comments Here"></textarea>
                                    <div class="thin-separator"></div>
                                    <input type="submit" class="button-2-colorful to-right" value="Post Comment" name="comment" />
                                </form>
                            </div>
                        </div>

                    </div><!-- end of .content-container -->

                </div><!-- end of .zone-content -->
            </div><!-- end of .content-wrapper -->

        </section>

以下是我尝试过的各种 jQuery 选择器代码:

1.不起作用

<script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('div button[id^="test_id_"]').each(function(){
                $(this).click(function(e){
            var name = {"name":$(this).attr("id")};
            $.ajax({
                    url: 'receiveajax.php',
                    data: name,
                    type: 'POST',
                }).success(function(data) {

                        $(this).attr("disabled",true);
                    });

                    });
      });
   });
   </script>

2. 不起作用

<script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('button').click(function(e){
                $('button[id^="test_id_"]').each(function(){
            var name = {"name":$(this).attr("id")};
            $.ajax({
                    url: 'receiveajax.php',
                    data: name,
                    type: 'POST',
                }).success(function(data) {

                        $(this).attr("disabled",true);

                    });
      });
   });
   </script>

3. 特定元素选择器查询。有效。

<script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#test_id_1").click(function(e){
            var name = {"name":$(this).attr("id")};
            $.ajax({
                    url: 'receiveajax.php',
                    data: name,
                    type: 'POST',
                }).success(function(data) {

                        $("#test_id_1,#test_id_2").attr("disabled",true);
                    });
      });
   });
   </script>

这是将接收 Ajax POST 请求的页面，以简单的 stub 实现。我还在 success() 回调中使用了它的 echo 输出来打印它，所以就我而言，这个文件没有任何错误。大概。 :

<?php
if( $_REQUEST["name"] )
{
   $name = $_REQUEST['name'];
   echo "Welcome ". $name;
}
?> 

Answer 1

1)你的循环很复杂，这是没有必要的。
2) 在 success 回调中，this 不是您的按钮，您应该保留对它的引用。
3) 首选使用 prop 作为 disabled 属性。

$(document).ready(function() {
    $('button').click(function(e){
        var $button = $(this);
        var name = {"name": $button.attr("id")};

        $.ajax({
            url: 'receiveajax.php',
            data: name,
            type: 'POST',
        }).success(function(data) {
            $button.prop("disabled", true);
        });
    });
});