javascript - 每次加载 php include 时更改 jscript 变量

Question

我创建了一个页面，在我的主页上显示数据库中的产品列表。当用户单击任何产品时，都会打开一个模式，该模式包含产品信息以及图片库。

    $product_handler = new Product ($cao);
    $products = $product_handler->getProducts();
    if($products) {
        /* @var $prod Product */
        foreach ($products as $key => $prod) {


            ?>
            <div class="col-md-4" style="overflow: hidden;">
            <img class="image-modal"  data-toggle="modal" style="width: 192px; height:192px;"  data-target="#<?php echo $prod->prod_name;?>Modal" src="<?php echo $prod->prod_icon; ?>">
            <a data-toggle="modal"  data-id="<?php echo $prod->prod_name ?>"  data-target="#<?php echo $prod->prod_name;?>Modal" class="image_modal"><h2 style='color:#2468A6'><b><?php echo $prod->prod_name ?></b></h2></a>
</div>  
    <!--------Modal starts here-------->
    <?php
$pres_path= "dub/place/folder/Presentation.php";


include $pres_path;
?>  
     <?php   
        }
    }

然后在 Presentation.php 文件中调用模式，其中包含所有产品信息和图片库。该页面还包含一大块用于导航图库中图像的 JavaScript 。

在此 javascript 部分中，我有一个变量用于确定当前图像是什么。

    <script> 

    var currentImage = 1;
                            $('a.galleryBullet' + currentImage).addClass("active");
                            $('a.thumbnailsimage' + currentImage).addClass("active");
                            $('div.description' + currentImage).addClass("visible");

//Previous Arrow

                        $('a.previousSlideArrow').click(function () {
                            $('img.previewImage' + currentImage).hide();
                            $('a.galleryBullet' + currentImage).removeClass("active");
                            $('a.thumbnailsimage' + currentImage).removeClass("active");
                            $('div.description' + currentImage).removeClass("visible");

                            currentImage--;
                            if (currentImage == 0) {
                                currentImage = imagesTotal;
                            }
                            $('img.previewImage' + currentImage).show();
                            $('a.galleryBullet' + currentImage).addClass("active");
                            $('a.thumbnailsimage' + currentImage).addClass("active");
                            $('div.description' + currentImage).addClass("visible");

                            return false;
                        });




</script>

我遇到的问题是，当我单击一个产品并导航图库，然后关闭模式并选择另一个产品时。它继续的编号与我在上一模式中结束的编号相同。

例如。在模式 1 中，有 5 张幻灯片，我关闭幻灯片 1 上的模式。 3.如果我随后打开包含 7 张幻灯片的模态 2。我将开始第 1 张幻灯片。 3

我认为这样做的原因是因为变量 currentImage 被所有模态使用。于是，问题就出现了

我的问题是，

如何确保每次单击产品时，变量 currentImage 都设置为 1

Answer 1

为每个“模态”创建一个自己的范围:

(function(){
 var currentImage=1;
 alert(currentImage);//1
 //...
 })();
 alert(currentImage);//undefined

因此，所有模态的“范围模型”如下所示:

 window.unknownfunction1.currentImage;
 window.unknownfunction2.currentImage;

之前:

window.currentImage;