Question

我有一个显示用户ID，名称，internetstatus，按钮

的表

如果互联网状态为0，当我点击按钮时，它会将数据库更新为1，反之亦然。

row['internet'] == 0 //Red button和row['internet'] == 1 //Green button。当我点击红色按钮internet's时，值将更改为1，反之亦然。

Table Example Image

一切都按预期运作。唯一的问题是，当我点击User #2的按钮（根据图像）时，它也会影响User #3并且两者都会更新。如果它们都具有相同的状态，则所有内容都将更新，而不是仅单击一个。

我应该按照预期修改代码工作的哪一部分？

主页：

...table code...
//If internet == 0, Red Button will display
if($row['internet'] == 0) {
echo "<td><button type='submit' style='width:100%' class='btn btn-danger'  value='ariza' id='".$row['id']."'>Problem</button></td>
<script src='https://code.jquery.com/jquery-2.2.2.min.js'></script>
<script>
    $(document).ready(function() {
        $('.btn-danger').click(function() {
            var clickBtnValue = $(this).val();
            var kullanici = ".$row['id'].";
            var ajaxurl = 'ajax.php',
                data = {
                    'action': clickBtnValue,
                    'kullanici': kullanici
                };
            $.post(ajaxurl, data, function(response) {
                // Changes
                $('#ariza').removeClass('btn-danger');
                $('#ariza').addClass('btn-success');
                $('#ariza').html('Düzeltildi');
                $('#var').html('Arızalı');
                $('#var').css('color', 'red');
                alert(response);
                setTimeout(function() {
                    location.reload();
                }, 2000);
            });
        });
    });
</script>";
// If internet == 1, Green Button will display
} else {
echo "<td><button type='submit' style='width:100%' class='btn btn-success'  value='duzelt' id='".$row['id']."'>OK</button></td>
<script src='https://code.jquery.com/jquery-2.2.2.min.js'></script>
<script>
    $(document).ready(function() {
        $('.btn-success').click(function() {
            var clickBtnValue = $(this).val();
            var kullanici = ".$row['id'].";
            var ajaxurl = 'ajax.php',
                data = {
                    'action': clickBtnValue,
                    'kullanici': kullanici
                };
            $.post(ajaxurl, data, function(response) {
                // Changes
                $('#duzelt').removeClass('btn-success');
                $('#duzelt').addClass('btn-danger');
                $('#duzelt').html('Arızalı');
                $('#yok').html('Var');
                $('#yok').css('color', 'green');
                alert(response);
                setTimeout(function() {
                    location.reload();
                }, 2000);
            });
        });
    });
</script>";
}

ajax.php：

if (isset($_POST['action'])) {
    switch ($_POST['action']) {
        case 'duzelt':
            isaretle_arizali();
            break;
        case 'ariza':
            isaretle_duzeltildi();
            break;
    }
}

的functions.php：

function isaretle_arizali()
    {
    $mysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);
    $content = $_POST['kullanici'];
    $int = 0;
    if ($stmt = $mysqli->prepare("UPDATE members SET internet=? WHERE id=?"))
        {
        $stmt->bind_param('ss', $int, $content);
        $stmt->execute();
        $stmt->close();
        echo "Marked as Problem";
        }
      else
        {
        echo "Fail.";
        }
    }

function isaretle_duzeltildi()
    {
    $mysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);
    $content = $_POST['kullanici'];
    $int = 1;
    if ($stmt = $mysqli->prepare("UPDATE members SET internet=? WHERE id=?"))
        {
        $stmt->bind_param('ss', $int, $content);
        $stmt->execute();
        $stmt->close();
        echo "Marked as Fixed";
        }
      else
        {
        echo "Fail.";
        }
    }

Answer 1

这是一种替代解决方案，可以最大限度地减少代码重复。只需将此JavaScript代码放一次。

再次注意。只将此JavaScript代码放入您的页面一次。根据点击的内容，您无需将其置于更多时间。

示例PHP代码

//...table code...
//If internet == 0, Red Button will display
if($row['internet'] == 0): ?>
    <td>
       <button type='submit' style='width:100%' class='btn btn-danger'  value='ariza' id='<?=$row['id']?>'>Problem</button>
    </td>
<?php else: ?>
         <td>
            <button type='submit' style='width:100%' class='btn btn-success'  value='duzelt' id='<?=$row['id']?>'>OK</button>
        </td>
<?php endif; 

   // Rest of PHP code?

?>
<script> 
$(document).ready(function() {
    $('.btn-success, .btn-danger').click(function() {
        var clickBtnValue = $(this).val();
        var kullanici = $(this).attr("id");
        var ajaxurl = 'ajax.php',
        var data = {
            'action': clickBtnValue,
            'kullanici': kullanici
        };
        var self = this;
        $.post(ajaxurl, data, function(response) {
            // Changes
            if ($(self).is(".btn-success")) {
                  $(self).removeClass('btn-success'); 
                  $(self).addClass('btn-danger');
                  $(self).html('Arızalı');
                  $(self).parent().prev().html('Var');
                  $(self).parent().prev().css('color', 'green');
            } else {
                $(self).removeClass('btn-danger');
                $(self).addClass('btn-success');
                $(self).html('Düzeltildi');        
                $(self).parent().prev().html('Arızalı');
                $(self).parent().prev().css('color', 'red');
            }

            alert(response);
            setTimeout(function() {
                location.reload();
            }, 2000);
        });
    });
});
</script>

JQuery递归地调用它自己

1 个答案: