Question

我已经阅读了一些接近的答案，但我还是无法连接这些点。

我有一堆复选框，使用Ajax将1和0写入数据库。就像现在一样，我只是复制/粘贴了ajax函数，唯一需要改变的是它监听的#id。

如何概括ajax以使代码不重复？这就是我所拥有的：

                    <label class="rep_label"><input type="checkbox" id="goal1admin" name="goal1hit" value="1" checked />
            This is my first goal</label>

                    <label class="rep_label"><input type="checkbox" id="goal2admin" name="goal2hit" value="1"  />
            Goal 2</label>

                    <label class="rep_label"><input type="checkbox" id="goal3admin" name="goal3hit" value="1" checked />
            3rd time is the charm</label>


<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#goal1admin").change(function() { 
        if($(this).is(":checked")) { 
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"1", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal1admin').attr('checked', true); 
                },
                error:function(){
                    $('#goal1admin').attr('checked', false);                    }
            });
        } else {
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"0", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal1admin').attr('checked', false); 
                },
                error:function(){
                    $('#goal1admin').attr('checked', true); 
                }
            });
        }
    }); 
});
jQuery(document).ready(function($) {
    $("#goal2admin").change(function() { 
        if($(this).is(":checked")) { 
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"1", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal2admin').attr('checked', true); 
                },
                error:function(){
                    $('#goal2admin').attr('checked', false);                    }
            });
        } else {
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"0", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal2admin').attr('checked', false); 
                },
                error:function(){
                    $('#goal2admin').attr('checked', true); 
                }
            });
        }
    }); 
});
jQuery(document).ready(function($) {
    $("#goal3admin").change(function() { 
        if($(this).is(":checked")) { 
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"1", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal3admin').attr('checked', true); 
                },
                error:function(){
                    $('#goal3admin').attr('checked', false);                    }
            });
        } else {
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"0", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal3admin').attr('checked', false); 
                },
                error:function(){
                    $('#goal3admin').attr('checked', true); 
                }
            });
        }
    }); 
});

Answer 1

$("input[type=checkbox]").change(function() {  
    var $input = $(this); 

    $.ajax({
        url: 'code.php',
        type: 'POST',
        data: { db_column:$input.attr("name"), strState:$input.is(":checked"), user:"admin" },
        success: function() { // this happens after we get results
            $input.attr('checked', true); 
        },
        error:function(){
            $input.attr('checked', false);
        }
    });
});

这会将处理程序附加到所有复选框。我把它变得通用和简单，所以你不要使用条件。

Answer 2

jQuery(document).ready(function($) {
    //--------------------------------------------------------------------
    // use the class selector instead of id, this will allow you to do the
    // same for all elements with the same class
    //--------------------------------------------------------------------
    $(".rep_label input[type=checkbox]").change(function() { 
            //Cache the current element
            var $this = $(this);

            //cache the current checked state
            var checked = $this.is(':checked');
            var State = (checked)? "1":"0";

            //send ajax request
            $.ajax({
                url: 'code.php',
                type: 'POST',
                //set the state variable to the current element checked state
                data: { db_column:$this.attr("name"), strState:state, user:"admin" },
                success: function() { // this happens after we get results
                    //make the element checked
                    $this.attr('checked', checked); 
                },
                error:function(){
                    //make the element unchecked
                    $this.attr('checked', !checked);                    }
            });
    });
});

Answer 3

我认为你可以将它减少到这样：

$(document).ready(function($) {
  // if any checkbox changes, this is the handler for it
  $("input[type='checkbox']").change(function() {
    var checkboxIsChecked = $(this).is(":checked");
    var strStat = (checkboxIsChecked) ? "1" : "0";

    $.ajax({
      url: 'code.php',
      type: 'POST',
      data: {
        db_column: $(this).attr("name"),
        strState: strStat,
        user: "admin"
      },
      success: function() { // this happens after we get results
        console.log('SUCCESS');
        $(this).attr('checked', true);
      },
      error: function() {
        console.log('ERROR');
        $(this).attr('checked', false);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="rep_label">
  <input type="checkbox" id="goal1admin" name="goal1hit" value="1" checked />This is my first goal</label>

<label class="rep_label">
  <input type="checkbox" id="goal2admin" name="goal2hit" value="1" />Goal 2</label>

<label class="rep_label">
  <input type="checkbox" id="goal3admin" name="goal3hit" value="1" checked />3rd time is the charm</label>

对多个元素进行相同的AJAX调用

3 个答案: