Question

我正在建立一个新网站，我希望能够检测到用户在OnlinePizzaOrderingPage.html上单击的比萨饼，并在ShoppingCart.php上回显被单击的比萨饼的名称。

我尝试创建表单，但是由于任务要求是我不能使用表单并且用户必须单击图像，所以无法创建表单。我尝试使用get和post，但没有表单就无法使用。

OnlinePizzaOrderingPage.html

 <!DOCTYPE html>
<html>
    <head>
        <title>Online Pizza Ordering Page</title>
    </head>
    <body>
        <h1>Online Pizza Ordering Page</h1>
        <a href="Detailedsauceandquantitypage.html"><img src="supreme.jpg" 
        width="82" height="86" title="Detailed sauce and quantity page" 
        alt="Supreme"></a>
        <a href="Detailedsauceandquantitypage.html"><img src="meatlover.jpg" 
        width="82" height="86" title="Detailed sauce and quantity page" 
        alt="Meatlover"></a>
        <a href="Detailedsauceandquantitypage.html"><img src="hawaii.jpg" 
        width="82" height="86" title="Detailed sauce and quantity page" 
        alt="Hawaii"></a>
        <a href="Detailedsauceandquantitypage.html"><img src="fourseasons.jpg" 
        width="82" height="86" title="Detailed sauce and quantity page" alt="Four 
        Seasons"></a>
        <a href="Detailedsauceandquantitypage.html"><img src="vege.jpg" width="82" 
        height="86" title="Detailed sauce and quantity page" alt="Vege"></a>
    </body>
</html>

ShoppingCart.php

<!DOCTYPE html>
<html>
    <head>
        <title>Shopping Cart page</title>
    </head>
    <body>
        <h1>Shopping Cart page</h1>
        <?php
        // define variables and set to empty values
        $bbqPizza = $tomatoPizza = $salsaPizza = "";

        if ( isset( $_POST['submit'] ) ) {
            $bbq = $_POST["bbqPizza"];
            $tomato = $_POST["tomatoPizza"];
            $salsa = $_POST["salsaPizza"];
            echo $bbq . " pizzas with bbq sauce, " . $tomato . " pizzas with tomato sauce and " . $salsa . " pizzas with salsa sauce.";
        }
        ?>
        <br>
        <a href="OnlinePizzaOrderingPage.html">Add more pizzas to cart</a>
        <a href="Checkoutpage.html">Go to checkout</a>
    </body>
</html>

我希望Checkoutpage.html能够回显与用户在“在线比萨订购页面”中单击的比萨图像相对应的比萨名称。实际结果什么都没有。

Answer 1

您可以为此使用jquery

$(function(){
$('a').click(function(e) {
    e.preventDefault();
    var img_title = $('img', this).attr('title');
    alert(img_title);
 });
});

对于javascript，您需要在每个img标签中像这样传递函数中的标题

<img src="supreme.jpg" 
width="82" height="86" title="Detailed sauce and quantity page" 
alt="Supreme" onclick="imageTitle(this.title);">

然后使用javascript

<script>
function imageTitle(title){
 alert(title);
 console.log(title);
}
</script>

我怎么知道用户点击了哪个图像？

1 个答案: