Есть идеи, почему мой простой скрипт перестает работать на полпути вниз по странице?

Question

Есть идеи, почему мой простой скрипт перестает работать на полпути вниз по странице?

0

У меня есть простой модальный скрипт, который отлично работал в прошлом, но по какой-то причине он откажется работать после 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/

Han Yoon 03 окт. 2013, в 01:00

Источник

Теги:

javascript

jquery

html

css

4 ответа

Ещё вопросы

Vlad · Answer 1 · 2013-10-02T21-26-00.000Z

Посмотрев на источник сайта, вы можете видеть, что позиция на самом деле отличается для каждой строки изображений. Вот пример:

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

nemo · Answer 2 · 2013-10-02T21-08-00.000Z

как и другие, заметили, что позиционирование несовместимо. Я не вижу ваш CSS, но, может быть, вы можете быстро выиграть с некоторыми отличными настройками CSS. Попробуйте поместить всплывающее окно относительно окна

zaquest · Answer 3 · 2013-10-02T20-46-00.000Z

На странице, на которую вы ссылались, вы меняете position: [150, 70] на более высокие значения, это и position: fixed делает ваш модальный вид там, где он не отображается. Положите position: [150, 70] повсюду. Кроме того, вам следует следовать совету @Casey и использовать итерацию для уменьшения количества кода.

Ах, я вижу, что происходит сейчас. Я изначально ввел позиции, чтобы они работали на вкладке Facebook. Хорошо работает как вкладка FB: facebook.com/pages/Spuxy-Studios/…

Casey · Answer 4 · 2013-10-02T20-12-00.000Z

Вы должны использовать селектор классов и прокручивать их, или что-то в этом духе, чтобы консолидировать ваш код и использовать меньше кода. Кроме того, снижает вероятность ошибки, связанной с опечатками или синтаксисом. Кроме того, он работает, но выставляется из окна просмотра. Просто уменьшите масштаб, и вы увидите. Он размещается в зависимости от того, как элемент упал на дом. Так что просто исправьте, как вы размещаете модальный. Это все!

Очень странно ... Есть идеи, почему это может происходить? Как я уже сказал, кодирование изображений почти все идентично - я дважды, трижды проверил, и я установил правильное расположение окна, которое нужно открыть.