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张幻灯片，而我关闭幻灯片上的模式。 3.如果我然后打开包含7张幻灯片的模态2。我将<幻灯片>开始。 3

我认为这是因为所有模态都使用变量currentImage。因此，出现了问题

我的问题是，

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

Answer 1

为每个＆＃34;模式创建一个自己的范围＆＃34;：

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

所以＆＃34;范围模型＆＃34;对于你所有的模态看起来像：

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

之前：

window.currentImage;

每次加载php包时都更改jscript变量

1 个答案: