CSS загруженных страниц меняется, когда страницы Бесконечной прокрутки загружаются в

Question

У меня есть бесконечный свиток, изотоп и звуковой проигрыватель по имени .mb_miniplayer_play на этом сайте, который я создаю. Проблема, с которой я столкнулась, - это когда загружается новая страница, css на ранее загруженных страницах меняются. Допустим, что загружена страница 2, изменяется css страницы 1. но это только один элемент.

Я пробовал разные вещи, но ничто не кажется, что все страницы выглядят и работают правильно.

Код выглядит следующим образом:

**//Audio jquery** 

    $(function AudioEvents(){ 

    $(".audio").mb_miniPlayer({ 
    width:210, 
    height:34, 
    inLine:false, 
    onEnd:playNext 
    }); 

    var $audios = $('.audio'); 

    function playNext(idx) { 
    var actualPlayer=$audios.eq(idx), 
    $filteredAtoms = $container.data('isotope').$filteredAtoms, 
    isotopeItemParent = actualPlayer.parents('.isotope-item'), 
    isoIndex = $filteredAtoms.index(isotopeItemParent[0]), 
    nextIndex = (isoIndex + 1) % $filteredAtoms.length; 

    $filteredAtoms.eq(nextIndex).find('.audio').mb_miniPlayer_play(); 
    } 



    **//Inifinite Scroll** 

    var $container = $('#container'); 

    $container.isotope({ 
    itemSelector : '.square' 
    }); 

    $container.infinitescroll({ 
    navSelector : '#page_nav', // selector for the paged navigation 
    nextSelector : '#page_nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.square',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/qkKy8.gif' 
     } 
    }, 

    // call Isotope as a callback 
     function(newElements) { 
     var $newElements = $(newElements); 

     AudioEvents($newElements); 

     // add hover events for new items 
     bindSquareEvents($newElements); 

     setTimeout(function() { 
     $container.isotope('insert', $newElements); 
     }, 1000); 
     }); 
    }); 

Кто-нибудь сталкивался с этим. Я предполагаю, что мой код jquery неверен или что-то не хватает, но я не знаю, что.

Вот HTML-разметка ... Дивер, который меняется, является .download. Настройки css для «Top» на загруженных страницах должны выглядеть правильно: top111, а только загруженные страницы нуждаются только в верхнем: -24, чтобы выглядеть правильно.

<div class="square techno"> 

<!-- DJ Picture --> 
<img src="Pictures/dirtyharris.jpg" class="img1" /> 
     <div class="boxtop"> 
     <span class="genre">Techno</span> 
     </div> 

     <div class="box"> 
     <a class="close" href="#close">&times;</a> 
     <!-- DJ Name --> 
     <h1> ThreeSixty & Dirty Harris</h1> 

     <!-- Song Title --> 
     <h2>Louka (Funkagenda Re-Edit)</h2> 

     <!--Song Description(179 characters with spaces)--> 
     <h4>I had to include this one since it literally took over control of me while driving the other morning. I was bouncing around in my seat like a little kid who desparately needs to use the bathroom. </h4> 

      <div class="buttons"> 
      <!--Song file info--> 
      <div class="player"> 
      <a id="m85" class="audio {skin:'#010101',showVolumeLevel:false,showTime:false,showRew:false,ogg:'MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).ogg'}" href="MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).mp3"></a></div> 


       <!--Download Link--> 
       <div class="download"> 
       <a href="MP3/ThreeSixty, Funkagenda - Loudka (Funkagenda Re-Edit).mp3" title='Right Click and Save Link As'> 
       <img src="img/dlicon.png"/></a> 

       </div> 
      </div> 
     </div> 

</div> 

Answer 1

Я не вижу никаких изменений в CSS в вашем jquery. CSS не является динамическим для изменения стиля самостоятельно на основе страниц. Конечно, это можно манипулировать JQuery или php, но я снова этого не вижу.