Javascript 你知道为什么我的简单脚本在页面的一半就停止工作了吗？

我有一个简单的模式脚本，在过去工作得很好，但由于某种原因，它将拒绝在第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>

代码与第21幅图几乎相同。但是，脚本拒绝在第9幅图像之后工作，从第10幅图像开始。我不明白为什么会发生这种事，或者是如何发生的。有什么意见吗

---

参考：

您应该使用一个类选择器，并遍历它们，或者类似的东西来整合您的代码，并且使用更少的代码。此外，还可以降低出现打字错误或语法相关错误的可能性。此外，它正在工作，但正在被放置到视口之外。只要缩小，你就会看到。它根据元素在dom中的放置方式进行放置。因此，只需确定如何放置模态。就这些

在您引用的页面上，您将

位置：[150,70]

更改为更高的值，此和

位置：fixed

使模态显示在不可见的位置。将

位置：[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"}                    
  });

模态内容
模态内容
$（'cocktails'）。在（'click'，'img'，function（）上{
$（'.more_info'，$（this））.modal({
接近：是的，
是的，
不透明度：80，
职位：[150,70]，
覆盖层：{backgroundColor:#fff}
});

就像其他人注意到的那样，定位不一致。我看不到你的CSS，但也许你可以通过一些漂亮的CSS设置快速获得成功。尝试相对于窗口定位弹出窗口非常奇怪。

知道为什么会发生这种情况吗？正如我所说，图像的编码几乎都是相同的——我已经进行了双重、三重检查我已经设置了要打开的窗口的正确位置。啊，我知道现在发生了什么。我最初输入了这些位置，以便在Facebook选项卡中工作。作为FB选项卡工作正常：

        $('.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 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"}                    
  });