內聯JavaScript導致jQuery循環插件停止

Question

我是jquery和Javascript的新手，我遇到了一個問題，我希望這裏有人能夠解決這個問題。我已經設置了jQuery Cycle插件來在div中顯示一些內容。現在我也有一些鏈接加載另一個div中的一些不同的內容。加載時，循環工作正常，但當我點擊任何鏈接並加載其他div中的內容時，此循環停止工作。請注意，我在鏈接的hrefs中使用了內嵌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> 

任何人都可以建議如何保持循環工作，同時也保持內聯JavaScript完好？或者你有更好的建議。

Answer 1

不知道不知道更多關於週期插件，但嘗試改變三米的HREFs以「＃」，然後將內嵌動作移動到一個onclick，就像這樣：

<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 */} 
    return false; 
} 
</script> 

<ul> 
    <li><a class="home" href="#" onclick="return content(1);">Home</a></li> 
    <li><a class="work" href="#" onclick="return content(2);">Work</a></li> 
    <li><a class="about" href="#" onclick="return 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> 

更妙的是殺點擊並動態應用偵聽器;你已經有了獨特的類名，所以你不需要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更新爲ID。這不是必需的，但是無論如何，您都有效地將類用作唯一標識符，這就是ID的用途;選擇使用它也更有效率。

最後，我建議你也考慮用非JavaScript訪問者（尤其是搜索引擎）的URL替換「＃」。