javascript - 如何使用js将新标签添加到jquery对话框中？

Question

我想使用 js 添加一个新标签到 jquery dialog-message1 中，以便该标签将显示在对话框中，直到单击“确定”按钮。此标签的文本应等于函数 .confirmation1 中的变量 product_name。有人可以帮助我并建议如何做到这一点吗？

整个代码如下所示:

<?php
session_start();

if (!isset($_SESSION["login"])){
        header("Location: login.php");
        exit();
}

include 'db_connection.php';
include 'functions.php';


//obliczanie danych na potrzeby stronicowania
$cur_page = isset($_GET['page']) ? $_GET['page'] : 1;
$results_per_page = 26; //Liczba wyników na stronę
$skip = (($cur_page - 1) * $results_per_page); //liczba pomijanych wierszy na potrzeby stronicowania

if (isset($T_szukanaNazwa)){
        $query = "SELECT * FROM potrawy WHERE nazwa LIKE '%".$T_szukanaNazwa."%'";
} else {
        $query = "SELECT * FROM potrawy";
}

$data = mysqli_query($conn, $query); //pobieramy wszystkie wiersze

$total = mysqli_num_rows($data); //liczba wierszy zapisana na potrzeby stronicowania
$num_pages = ceil($total / $results_per_page); //określenie liczby stron
$query .=  " LIMIT $skip, $results_per_page"; //dopisujemy do wcześniejszego zapytania, klauzule LIMIT

?>


<table class="TabelaSzara1">
<thead>
<tr>
<th width="320px">Nazwa potrawy</th>
<th width="70px">Waga (g)</th>
<th width="80px">Kalorie (Kcal)</th>
<th width="80px">Białko (g)</th>
<th width="80px">Tłuszcze (g)</th>
<th width="100px">Węglowodany (g)</th>
<th width="30px"></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7">
<div class="links">

<?php
//wyświetlanie nawigację przy stronnicowaniu
if ($num_pages > 1) {
     echo generate_page_links_potrawy($cur_page, $num_pages);
}
?>

</div>
</td>
</tr>
</tfoot>

<tbody>

<?php

//wykonanie kwerendy
$result = mysqli_query($conn, $query);

while($row = mysqli_fetch_array($result))
{
        echo "<tr>";
        echo "<td>".$row['nazwa']."</td>" ;
        echo "<td>".$row['waga']."</td>" ;
        echo "<td>".$row['kalorie']."</td>" ;
        echo "<td>".$row['bialko']."</td>" ;
        echo "<td>".$row['tluszcze']."</td>" ;
        echo "<td>".$row['weglowodany']."</td>" ;
        echo "<td style='text-align:center'>" ;

        $T_nazwa=$row['nazwa'];

        echo "<a href='usunPotrawa.php?name=".$T_nazwa."' title='Usuń' class='confirmation'><img src='pictures/cross16.jpg' width='10' height='10' /></a>" ;
        echo "<a href='infoPotrawa.php?name=".$T_nazwa."' title='Informacja' class='confirmation1'><img src='pictures/question16.jpg' width='10' height='10' /></a>" ;

        echo "</td>" ;
        echo "</tr>";
}

mysqli_close($conn);

?>

<div id="dialog-message" title="Usuwanie potrawy">
        <p>
        <span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p>
</div>

<div id="dialog-message1" title="Informacje o potrawie">
        <p>
        <span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p>
</div>

<script type="text/javascript">

    $("#dialog-message").hide();
    $('.confirmation').on('click', function(e) {
        e.preventDefault();
        var lnk = $(this).attr('href');
        $("#dialog-message").dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                    window.location.href = lnk;
                },
                Anuluj: function() {
                    $(this).dialog("close");
                }
            }
        });
    });

    $("#dialog-message1").hide();
    $('.confirmation1').on('click', function(e) {
        e.preventDefault();
        var lnk = $(this).attr('href');
        var product_name = $(this).parents("tr").find("td").first().html();
        console.log(product_name);
        $("#dialog-message1").dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                }
            }
        });
    });

</script>

<form>
        <fieldset id="SzukanieProduktu">
        <legend>Wyszukaj potrawę</legend>

        <div>
        <input id="akcja" name="akcja" type="hidden" value="potrawy">
        </div>

        <div>
        <label for="szukanaNazwa" id="LS1">Nazwa potrawy</label>
        <p>
        <input id="szukanaNazwa" name="szukanaNazwa" type="text" maxlength="255" required>
        </p>
        </div>

        <button title="Szukaj" type="submit" value="Submit" id="Szukaj"> <img src="pictures/search32.jpg" /></button>

        </fieldset>

</form>

<form>
        <fieldset id="DodawanieProduktu">
        <legend>Nowy produkt</legend>

        <div>
        <input id="akcja" name="akcja" type="hidden" value="dodajPotrawa">
        </div>

        <div>
        <label for="name" id="L1">Nazwa produktu</label>
        <input id="name" name="name" type="text" maxlength="255" required>
        </div>

        <div>
        <label for="kalorie" id="L2">Kalorie (Kcal)</label>
        <input id="kalorie" name="kalorie" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <div>
        <label for="bialko" id="L3">Białko (g)</label>
        <input id="bialko" name="bialko" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <div>
        <label for="tluszcze" id="L4">Tłuszcze (g)</label>
        <input id="tluszcze" name="tluszcze" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <div>
        <label for="weglowodany" id="L5">Węglowodany (g)</label>
        <input id="weglowodany" name="weglowodany" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <button title="Zapisz" type="submit" value="Submit" id="Dodaj"> <img src="pictures/save32.jpg" /></button>

        </fieldset>

        <fieldset id="PomocProduktu">
        <legend>Opis procedury dodawania produktu</legend>

        <div>
        <label id="H1">Krok 1: Wpisz nazwę produktu</label>
        </div>

        <div>
        <label id="H2">Krok 2: Wpisz liczbę kalorii na 100g produktu</label>
        </div>

        <div>
        <label id="H3">Krok 3: Wpisz ilość białka (g)</label>
        </div>

        <div>
        <label id="H4">Krok 4: Wpisz ilość tłuszczu (g)</label>
        </div>

        <div>
        <label id="H5">Krok 5: Wpisz ilość węglowodanów (g)</label>
        </div>

        <div>
        <label id="H6">Krok 6: Naciśnij ikonę dyskietki aby zapisać</label>
        </div>

        </fieldset>


        <fieldset id="PomocUsuwanie">
        <legend>Opis procedury usuwania produktu</legend>

        <div>
        <label id="H11">Krok 1: Odszukaj produkt w tablei produktów</label>
        </div>

        <div>
        <label id="H12">Krok 2: Kliknij ikone krzyżyka aby usunąć produkt</label>
        </div>

        <div>
        <label id="H13">Krok 3: Potwierdź usunięcie produktu przyciskiem OK</label>
        </div>

        </fieldset>

</form>
</tbody>
</table>

预先感谢您的帮助。

更新:为了您的方便，我复制了构建对话框的部分 js 和 html:

<div id="dialog-message1" title="Informacje o potrawie">
        <p>
        <span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p>
</div>


$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    var product_name = $(this).parents("tr").find("td").first().html();
    console.log(product_name);
    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
});

Answer 1

使用 $("<label>") 创建标签，为其提供所需的文本，然后将其附加或添加到对话框中。

$('.confirmation1').on('click', function(e) {
  e.preventDefault();
  var lnk = $(this).attr('href');
  var product_name = $(this).parents("tr").find("td").first().html();
  console.log(product_name);
  $("#dialog-message1").prepend($("<label>", {
      text: product_name
    }))
    .dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $(this).dialog("close");
        }
      }
    });
});