知道为什么我的简单脚本在页面中途停止工作

Any idea why my simple script stops working halfway down the page?

本文关键字：停止工作 脚本 为什么 我的 简单      更新时间：2023-09-26

我有一个简单的模态脚本，过去工作正常，但由于某种原因，它会在第 10 张图像之后拒绝工作。 

        <div class = "images_container"> <!-- Image 1 -->
            <div class = "images image_1">
                <div class = "hover_alpha">
                    <div class = "plus">
                    </div>
                </div>
            </div>
            <div class = "images image_2"> <!-- Image 2 -->
                <div class = "hover_alpha">
                    <div class = "plus">
                    </div>
                </div>
            </div>
            <div class = "images image_3"> <!-- Image 3 -->
                <div class = "hover_alpha">
                    <div class = "plus">
                    </div>
                </div>
            </div>

<div id="image_1_content"> 
        <img src = "images/1.jpg">
</div>
<div id="image_2_content"> 
        <img src = "images/2.jpg">
</div>
<div id="image_3_content"> 
        <img src = "images/3.jpg">


        $('.image_1').click(function () {
            $('#image_1_content').modal({
                close: true,
                overlayClose:true,
                position: [150,70],
                opacity:80,
                overlayCss: {backgroundColor:"#fff"}                    
            });
            return false;
        });
        $('.image_2').click(function () {
            $('#image_2_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [150,70],
                overlayCss: {backgroundColor:"#fff"}                    
            });
            return false;
        });
        $('.image_3').click(function () {
            $('#image_3_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [150,70],
                overlayCss: {backgroundColor:"#fff"}                    
            });
            return false;
        });

代码与第 21 张图像几乎相同。但是，脚本拒绝在第 9 个图像之后工作，从第 10 个图像开始。我对为什么或如何发生这种情况感到困惑。任何输入？

参考： http://spuxystudios.com/cocktails/

你应该使用类选择器，并循环访问它们，或者类似的东西来整合你的代码，并使用更少的代码。此外，降低了拼写错误或语法相关错误的可能性。 此外，它正在工作，但被放置在视口之外。只需缩小，您就会看到。它根据元素落在 dom 上的方式进行放置。因此，只需修复您放置模态的方式。仅此而已！

在您引用的页面上，您将position: [150, 70]更改为更高的值，这和position: fixed使您的模态出现在不可见的地方。到处放position: [150, 70]。此外，您应该遵循@Casey建议并使用迭代来减少代码量。

查看网站的源头，您可以看到每行图像的位置实际上都不同。下面是一个示例：

        $('.image_6').click(function () {
            $('#image_6_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [550,30],
                overlayCss: {backgroundColor:"#fff"}                    
            });
            return false;
        });
        $('.image_7').click(function () {
            $('#image_7_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [950,30],
                overlayCss: {backgroundColor:"#fff"}                    
            });
            return false;
        });

正如其他人所说，这最好使用泛型类来完成。默认情况下，您可以将内容放在同一个div 中并将其隐藏。

<div class="cocktails">
  <div class="cocktail">
    <img 1>
    <div class="more_info">modal content</div>
  </div>
  <div class="cocktail">
    <img 2>
    <div class="more_info">modal content</div>
  </div>
</div>
$('.cocktails').on('click', 'img', function() {
  $('.more_info', $(this)).modal({
    close: true,
    overlayClose:true,
    opacity:80,
    position: [150,70],
    overlayCss: {backgroundColor:"#fff"}                    
  });
<</div> div class="answers">

就像其他人已经注意到的那样，定位并不一致。 我没有看到您的 CSS，但也许您可以通过一些漂亮的 CSS 设置快速获胜。尝试相对于窗口定位弹出窗口

相关文章：