Встроенный JavaScript вызывает остановку плагина jQuery Cycle - PullRequest
Новая
       5

Встроенный JavaScript вызывает остановку плагина jQuery Cycle

1 голос
/ 11 августа 2010

Я новичок в jquery и Javascript и столкнулся с проблемой, которую, я надеюсь, кто-нибудь здесь сможет решить.Я настроил плагин jquery Cycle для отображения некоторого контента в div.Теперь у меня также есть определенные ссылки, загружающие различный контент в другой div.При загрузке цикл работает нормально, но когда я нажимаю на любую из ссылок и загружаю содержимое в другой div, этот цикл перестает работать.Пожалуйста, обратите внимание, что я использую встроенный javascript в ссылках.И это создает конфликт.Мой код: 

<script type="text/javascript">     
   $(document).ready(function() {
   $(".paras").cycle({
        fx: 'fade',
        speed: 200,
        timeout: 1000,
        next:   '.tnext',
        prev:   '.tprev',
        cleartype: '1'
        })

        content(1); /* To load content 1 on page load */

    });

    function content(i){
        if (i == 1) {/* Code to load content in BIG DIV from external HTML */}
        if (i == 2) {/* Code to load content in BIG DIV from external HTML */}
        if (i == 3) {/* Code to load content in BIG DIV from external HTML */}
    }
</script>

<ul>
   <li><a class="home" href="javascript:content(1)">Home</a></li>
   <li><a class="work" href="javascript:content(2)">Work</a></li>
   <li><a class="about" href="javascript:content(3)">About</a></li>
</ul>

<div>
/* This is the big div */
</div>

<div class="paras">
/* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV  */
</div>

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

1 Ответ

0 голосов
/ 11 августа 2010

Не уверен, не зная больше о плагине Cycle, но попробуйте изменить три hrefs на «#», а затем переместить встроенное действие на нажатие кнопки, например так:убить щелчки и применить слушателя динамически;у вас уже есть уникальные имена классов, поэтому вам не нужны 1,2,3.Даже если это не относится к вашей проблеме, вот как это сделать: 

<script type="text/javascript"> 

$(document).ready(function() {
    $("#paras").cycle({
        fx: 'fade',
        speed: 200,
        timeout: 1000,
        next:   '.tnext',
        prev:   '.tprev',
        cleartype: '1'
    });

    content("home"); /* To load content 1 on page load */


    $('#contentlist li').click(function() {
        content(this.attr('id'));
    });

});


function content(elId){

    if (elId == 'home') {/* Code to load content in BIG DIV from external HTML */}
    else if (elId == 'work') {/* Code to load content in BIG DIV from external HTML */}
    else if (elId == 'about') {/* Code to load content in BIG DIV from external HTML */}
    return false;
}
</script>

<ul id="contentlist">
   <li><a id="home" href="#">Home</a></li>
   <li><a id="work" href="#">Work</a></li>
   <li><a id="about" href="#">About</a></li>
</ul>

<div>
    /* This is the big div */
</div>

<div id="paras">
    /* This is the small div. Content loaded using jquery cycle. Stops cycling when    content loaded in BIG DIV  */
</div>

Я также обновил classNames до идентификаторов.В этом нет необходимости, но вы все равно эффективно используете классы в качестве уникальных идентификаторов, и для этого нужен идентификатор;его также эффективнее выбирать.

Наконец, я предлагаю вам также рассмотреть вопрос о замене "#" на URL-адреса для посетителей, не использующих JavaScript (особенно в поисковых системах).

...