Javascript JQuery递归地调用自己

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

如果internet状态为0，当我单击按钮时，它会将数据库更新为1，反之亦然

另外，

行['internet']==0//红色按钮

和

行['internet']==1//绿色按钮

。当我点击红色按钮

时，互联网的

值将更改为

1

，反之亦然

一切按计划进行。唯一的问题是，当我点击

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>";
}

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.";
        }
    }

---

这里有一个替代解决方案，它还可以最大限度地减少代码重复。只放置此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>

/…表格代码。。。
//如果internet==0，将显示红色按钮
如果（$row['internet']==0）：？>
$（文档）.ready（函数（）{
$（'.btn success，.btn danger'）。单击（函数（）{
var clickBtnValue=$（this.val（）；
var kullanici=$（this.attr（“id”）；
var ajaxurl='ajax.php'，
风险值数据={
“操作”：单击b值，
“kullanici”：kullanici
};
var self=这个；
$.post（ajaxurl、数据、函数（响应）{
//变化
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'）；
}否则{
$（self.removeClass（'btn-danger'）；
$（self.addClass（'btn-success'）；
$（self.html（'Düzeltildi'）；
$（self.parent（）.prev（）.html（'Arızalı'）；
$（self.parent（）.prev（）.css（'color'，'red'）；
}
警报（响应）；
setTimeout（函数（）{
location.reload（）；
}, 2000);
});
});
});

这里有一个替代解决方案，它还可以最大限度地减少代码重复。只放置此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>

/…表格代码。。。
//如果internet==0，将显示红色按钮
如果（$row['internet']==0）：？>
$（文档）.ready（函数（）{
$（'.btn success，.btn danger'）。单击（函数（）{
var clickBtnValue=$（this.val（）；
var kullanici=$（this.attr（“id”）；
var ajaxurl='ajax.php'，
风险值数据={
“操作”：单击b值，
“kullanici”：kullanici
};
var self=这个；
$.post（ajaxurl、数据、函数（响应）{
//变化
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'）；
}否则{
$（self.removeClass（'btn-danger'）；
$（self.addClass（'btn-success'）；
$（self.html（'Düzeltildi'）；
$（self.parent（）.prev（）.html（'Arızalı'）；
$（self.parent（）.prev（）.css（'color'，'red'）；
}
警报（响应）；
setTimeout（函数（）{
location.reload（）；
}, 2000);
});
});
});

看起来您有多个相同ID的按钮#阿里扎-不要这样做。此外，您还需要查看$this.class（），以仅更改单击的按钮，而不是更改具有相同类（或我认为是相同ID）的所有按钮@TheAnguy每个按钮都有一个

ID

的

userid

（

ID=”。$row['ID']

）。基本上，当我点击User3的按钮时，它的ID是唯一的，应该只更新User3。但我肯定遗漏了什么。编辑*我知道你在做什么，我正在更新它，看看它是否有效！如果不起作用，你能编辑帖子以包含html输出吗？你正在使用不同的函数体多次绑定同一个选择器。Y你最终会调用所有按钮。与其用

$（“.btn danger”）

绑定，不如用

$（）

绑定，看起来你有多个具有相同ID的按钮#ariza-不要这样做。你还需要查看$this.class（）以仅更改单击的按钮，而不是更改具有相同类（或我认为在你的情况下是ID）的所有按钮@Vongue Every按钮具有其

用户id的
id
（
id='”“$row['id']
）。基本上，当我点击User3的按钮时，它的ID是唯一的，应该只更新User3。但我肯定错过了什么。编辑*我知道你在说什么，我正在更新它，看看它是否有效！如果这不起作用，你能编辑文章以包含html输出吗？你正在使用不同的函数体绑定同一个选择器多次。你最终会给所有人打电话。代替
$（“.btn danger”）
bind by
$（）
谢谢你这么好的解释<代码>风险值数据

应该是

数据

我假设。我更新了关于这个问题的解决方案。哇，我有太多重复的代码：-）唯一的问题是，按钮不会被更新。文本正在更新，但只有第一列的：）@MesutK（如果有理由声明数据）