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>

有人可以建议如何保持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>

更好的方法是杀死onclicks并动态应用监听器;你已经有了独特的类名，所以你不需要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访问者的网址（尤其是搜索引擎）。

内联Javascript导致jQuery Cycle插件停止

1 个答案: