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

Question

我有一个简单的模态脚本，过去运行良好，但出于某种原因，它会在第 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/

Answer 1

您应该使用类选择器并遍历它们，或者类似的东西来合并您的代码，并使用更少的代码。此外，还降低了出现拼写错误或语法相关错误的可能性。此外，它正在工作，但被放置在视口(viewport)之外。只需缩小，您就会看到。它根据元素落在 dom 上的方式放置。因此，只需修复您放置模态的方式即可。就这些!