PHP 和 SweetAlert 使用循环

Question

我正在尝试在 php

中使用 sweetalert（JavaScript 警报的替代品）

但我不知道如何将它与循环一起使用。

感谢您的帮助。

这是我目前所拥有的，但它没有给我任何错误，而且它不起作用:(

JavaScript

<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script type="text/javascript">
$("#SweetAlert<?php echo($contact_id);?>").click(function() {
    sweetAlert({
        title: "Make Changes ?",
        text: "You Are about to Change <?php echo($contact_lastname);?> (<?php echo($splitName[0]);?> - <?php echo($splitName[1]);?>)",
        type: "warning" ,
        showCancelButton: true,
        confirmButtonColor: "#2e8c37",
        confirmButtonText: "Yes, Continue",
        cancelButtonText: "No, Cancel",
        closeOnConfirm: false,
        closeOnCancel: true 
    },
    function(isConfirm){
        if (isConfirm) {
            window.location.href = 'main.php?id=<?php echo($contact_id);?>&groupid=<?php echo($group_id);?>&unit=<?php echo($contact_lastname);?>';
        }
    });
});
</script>

PHP

// PHP LOOP: START

echo("<A HREF=\"#\" id=\"SweetAlert$contact_id\"><img src=\"button_ok_2.png\" onmouseover=\"this.style.cursor='pointer'\" border=\"0\" border=\"0\" title=\"Name # $contact_lastname\"></A>\n");

// PHP LOOP: END

Answer 1

首先，您可以为所有 "Sweet Alert Links" 设置一个 css class，这样您就可以像这样通过 jquery 捕获它们： <a class="SweetAlertLink" ... 然后您不需要id 让他们通过 id select 他们（虽然你可以用 id 做到这一点，但用 class 更容易） - 你不需要分配css 中的任何 css class。这只是为了能够 select jquery

中所有这些特定的 link

然后您可以使用 data 属性为每个 link 设置不同的数据，然后在您的 jquery 中使用它。所以你可以有 <a <a class="SweetAlertLink" data-contact_lastname="Lastname-1" ... 这意味着这条记录的姓氏是 "Lastname-1"，所以你可以像这样在你的循环中设置所有这些数据：<a class="SweetAlertLink" data-contact_lastname="'.$contact_lastname.'"...

然后在您的 jquery 中，您可以像这样访问这些数据属性：$(this).data("contact_lastname") 在您的 $(".SweetAlertLink").click(function() { 方法中。

但是因为在function(isConfirm){中this不再引用<a>标签，所以我们必须在<a>开头的元素上赋值一个对象$(".SweetAlertLink").click(function() { 方法像这样 curObj = $(this); 然后在 function(isConfirm){ 函数中引用这个对象而不是 this 像这样： curObj.data("contact_lastname")

因此您的代码将如下所示：

JavaScript

<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="sweetalert.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var curObj;
    $(".SweetAlertLink").click(function() {
        curObj = $(this);
        sweetAlert({
            title: "Make Changes ?",
            text: "You Are about to Change "+$(this).data("contact_lastname")+" ("+$(this).data("split_name1")+" - "+$(this).data("split_name2")+")",
            type: "warning" ,
            showCancelButton: true,
            confirmButtonColor: "#2e8c37",
            confirmButtonText: "Yes, Continue",
            cancelButtonText: "No, Cancel",
            closeOnConfirm: false,
            closeOnCancel: true 
        },
        function(isConfirm){
            if(isConfirm){
                window.location.href = 'main.php?id='+curObj.data("contact_id")+'&groupid='+curObj.data("group_id")+'&unit='+curObj.data("contact_lastname");
            }
        });
    });
});
</script>

php

<?php
// PHP LOOP: START

$string = '<a class="SweetAlertLink" href="#" id="SweetAlert'.$contact_id.'" data-contact_lastname="'.$contact_lastname.'" data-split_name1="'.$splitName[0].'" data-split_name2="'.$splitName[1].'" data-contact_id="'.$contact_id.'" data-group_id="'.$group_id.'">';
$string .= '<img src="button_ok_2.png" onmouseover="this.style.cursor=\'pointer\'" border="0" border="0" title="Name # '.$contact_lastname.'">';
$string .= '</a><br>';
echo $string;

// PHP LOOP: END
?>

注意1：使用此方法，每个元素后面不需要JavaScript代码，只需要有这个JavaScript代码在您页面的顶部 <head> 部分

Note2: 我假设您在循环中的 php 变量中有正确的值，例如 $contact_id 或 $contact_lastname 或 $group_id 或 ...

注意 3： 我已经为 data 属性提供了一些临时名称，例如 data-contact_lastname 或 data-contact_id 或...您可以更改它们适合您的需要。但请记住，如果您更改它们，则必须在 php 和相应的 JavaScript 代码中更改它们...

PHP 和 SweetAlert 使用循环

PHP and SweetAlert using a Loop

javascript

php

sweetalert