内联 Javascript 导致 jQuery Cycle 插件停止

Question

我是 jquery 和 Javascript 的新手，我遇到了一个问题，我希望这里有人能够解决。我已经设置了一个 jquery Cycle 插件来显示 div 中的一些内容。现在我也有某些链接在另一个 div 中加载一些不同的内容。加载后，循环工作正常，但是当我单击任何链接并加载另一个 div 中的内容时，该循环停止工作。请注意，我在链接的 href 中使用了内联 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 完整吗？或者你有更好的建议吗？

Answer 1

如果不了解有关 Cycle 插件的更多信息，则不确定，但尝试将三个 href 更改为“#”，然后将内联操作移至 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>

更好的是终止 onclick 并动态应用侦听器；你已经有了唯一的类名，所以你不需要 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。