通过从另一个页面单击使下拉值和图像在另一个页面上处于活动状态

Question

不知道可不可以。在我想要的项目中，第 1 页上的所有产品都具有不同的风味，第 2 页是它的描述性页面。因此，一旦我单击第 1 页上的特定产品，同一产品在第 2 页的下拉菜单和图像中也会处于活动状态。

第 1 页

<div class="m-t text-center">
    <a href="" class="btn btn-xs btn-outline btn-primary">Chocolate <i
            class="fa fa-long-arrow-right"></i> </a>
</div>

<div class="m-t text-center mt-3" >
    <a href="" class="btn btn-xs btn-outline btn-primary">Cafe <i
            class="fa fa-long-arrow-right"></i> </a>
</div>

<div class="m-t text-center mt-3" >
    <a href="" class="btn btn-xs btn-outline btn-primary">Cream and cookies <i
            class="fa fa-long-arrow-right"></i> </a>
</div>

第 2 页

<img id="img1" src="img/tryimages/WHEYPRO-FRONT-1.png" name="myImage">


<div class="mt-3">
    <form method="" action="" name="flavours">
        <select  name="switch" onchange="switchImage();">
            <option value="1" id="chocolate">Chocolate</option>
            <option value="2" id="cafe">Cafe</option>
            <option value="3" id="cc">Cream & Cookies</option>
        </select>
    </form>
</div>

<script>
    // This is the code to preload the images
    var imageList = Array();
    for (var i = 1; i <= 3; i++) {
        imageList[i] = new Image;
        imageList[i].src = "img/tryimages/WHEYPRO-FRONT-" + i + ".png";
    }

    function switchImage() {
        var selectedImage = document.flavours.switch.options[document.flavours.switch.selectedIndex].value;
        document.myImage.src = imageList[selectedImage].src;
    }
</script>

所以如果有人点击第 1 页上的咖啡馆按钮，相同的图像和下拉值应该在第 2 页上处于活动状态，依此类推。如果可能，请在 Javascript 或 Php 上提供帮助，因为我对编程有点陌生。

谢谢

Answer 1

你可以用两种方法做到这一点

首先: 通过将查询参数发送到第二页，即您可以将项目的值发送到第二页

在第 1 页中：

<a href="link-to-page-2?i=1" class="btn btn-xs btn-outline btn-primary">Chocolate <i
            class="fa fa-long-arrow-right"></i> </a>

并且在第 2 页中您可以访问此参数：


        <script>
            let selectedImage = 0;
            window.addEventListener("load", (e) => {
                let searchParams = new URLSearchParams(window.location.search);
                if (searchParams.has("i")) {
                    selectedImage = searchParams.get("i");
                    // run the switchImage function then.
                }
            });

        </script>

其次：您可以使用 localstorage。您可以将索引存储在 localstorage 中并在另一个页面中访问它。

Answer 2

感谢您的支持，工作已完成。我使用了这个代码

    // This is the code to preload the images
    var imageList = Array();
    for (var a = 1; a <= 3; a++) {
        imageList[a] = new Image;
        imageList[a].src = "img/products/WHEYPRO-FRONT-" + a + ".png";
    }
            // function for changing picture by getting clicks from 1st page 
                let selectedImage = 0;
            // eventlistner load 
                window.addEventListener("load", (e) => {
                let searchParams = newURLSearchParams(document.location.search);
                let i = parseInt(searchParams.get("i"), 10);
                selectedImage = i;
                document.myImage.src = imageList[selectedImage].src;
                document.getElementById("drop").selectedIndex = i-1;                
             });

通过从另一个页面单击使下拉值和图像在另一个页面上处于活动状态

Making dropdown value and image active on another page by clicking from another page

javascript

php

html

css

dropdown