使用 AJAX 运行 jQuery 滑块脚本答案

【问题标题】：Run jQuery slider script using AJAX使用 AJAX 运行 jQuery 滑块脚本
【发布时间】：2012-04-17 23:46:56
【问题描述】：

我正在尝试使用 AJAX 运行 jQuery 滑块脚本，但没有成功。

这里是 AJAX 调用：

HTML

 <div id="sn"><a href="#" id="button" onclick="loadDoc('sn','example4.html')">test</a></div>

<script type="text/javascript"> 
function loadDoc(id, url) {
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById(id).innerHTML=xmlhttp.responseText;
    }
  } 
  xmlhttp.open("GET",url,false); 
  xmlhttp.send(null);
} 
</script>

这里是我实现 jQuery 滑块脚本的地方：

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>
 <body>
    <div class="container">
        <div id="va-accordion" class="va-container">
            <div class="va-nav">
                <span class="va-nav-prev">Previous</span>
                <span class="va-nav-next">Next</span>
            </div>
            <div class="va-wrapper" style="background:#f9e830;">
                <div class="va-slice va-slice-1">
                    <div class="va-content">
                        <p>TEST1</p>

                    </div>
                </div>
                <div class="va-slice va-slice-2">
                    <div class="va-content">
                        <p>TEST2</p>

                    </div>  
                </div>
                <div class="va-slice va-slice-3">
                    <div class="va-content">
                        <p>TEST3</p>

                    </div>  
                </div>

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

    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery.vaccordion.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#va-accordion').vaccordion({
                expandedHeight  : 350,
                animSpeed       : 400,
                animOpacity     : 0.7,
                visibleSlices   : 2
            });
        });
    </script>
</body>

这是滑块的 CSS

 /* Vertical Accordion Style */
.va-container{
position:relative;
margin:40px auto 0 auto;
 }
.va-wrapper{
width:100%;
height:100%;
position:relative;
overflow:hidden;
background:#000;
 }
.va-slice{
cursor:pointer;
position:absolute;
width:100%;
left:0px;
overflow:hidden;
 }

.va-title{
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
font-size:60px;
margin-left:20px;
color:#fff;
text-shadow: 0px 0px 1px white;
 }
 .va-content{
display:none;
margin-left:25px;
 }
 .va-slice p{
font-size: 22px;
font-style: italic;
font-family:Georgia, serif;
 }
 .va-slice ul{
margin-top:20px;
 }
 .va-slice ul li{
float:left;
margin:0px 2px;
 }
 .va-slice ul li a{
color:#000;
background:#eede2f;
padding:3px 6px;
font-size:14px;
font-family:'PT Sans', sans-serif;
text-transform:uppercase;
}
.va-slice ul li a:hover{
background:#000;
color:#fff;
text-shadow:none;
}
.va-nav span{
width:40px;
height:25px;
background:transparent url(../images/prev.png) no-repeat center center;
position:absolute;
top:-35px;
left:50%;
margin-left:-20px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
display:none;
z-index:100;
 }
 .va-nav span.va-nav-next{
background-image:url(../images/next.png);
top:auto;
bottom:-35px;
 }
.va-nav span:hover{
opacity:1.0;
 }

所以一切正常，如果它不是从 AJAX 运行的。任何想法如何使所有这些工作？谢谢）

解决方案：

 <div id="sn"><a href="#" id="button" onclick="loadDoc('sn','example4.html');jQuery('#va-accordion').vaccordion();">test</a></div>

【问题讨论】：

好吧，你说“这是通常的 AJAX 行”，但我从未听说过 loadDoc。你写了那个函数？代码是什么？该链接应该做什么？你的程序应该做什么？为什么您为 JQuery 问题发布了最少的 JQuery 代码？你看过JSFiddle吗？抱歉，欢迎使用 StackOverflow。
loadDoc 也很常见）这就是为什么没有发布它。
对不起，您的问题的答复是显而易见的。 “你的程序应该做什么？” - 这是一个滑块。你认为滑块可以做什么？它会滑动））请阅读代码。很简单。
但你没有说明哪里出了问题。您抛出了一段不相关的代码，loadDoc 不是“常见的”，更不用说像您标记的那样用 jQuery 编写了。 “它不起作用”不会让你到任何地方。页面不渲染？您的 AJAX 请求是否失败？黑豹吃你的孩子吗？ “整个输出”也没有任何意义。你的问题不清楚，缺乏解释。因此，“请阅读代码。这很简单”并不能开始解释您的要求
@JohnK 这是一个滑块：jqueryui.com/demos/slider 不是您认为的滑块。如果你要寻求帮助，你应该更具体。你应该放弃大部分 loadDoc 并考虑使用这个：api.jquery.com/load。您可能也有语法错误，因为在接近末尾的同一缩进级别有两个 </div>s。我会去为你做一个演示，但我不太喜欢你的态度，所以你只能靠你自己。

标签： jquery ajax slider

【解决方案1】：

尝试使用 jQuery 中内置的 load 函数来处理 AJAX 请求，就像你写的那样……我们将从消除过程开始。

转换这个：

<div id="sn"><a href="#" id="button" onclick="loadDoc('sn','example4.html')">test</a></div>

对此：

HTML

<div id="sn"><a href="#">test</a></div>

$(function() {
  $('#sn a').on('click', function(e) {
    e.preventDefault();
    $('#sn').load('example4.html');
  });
});

编辑

如果它仍然不起作用，并且您在控制台中看不到任何内容，请稍作修改......

try {
  $(function() {
    $('#sn a').on('click', function(e) {
      e.preventDefault();
      $('#sn').load('example4.html');
    });
  });
} catch(err) {
  alert(err);
}

【讨论】：

我的理论是在停止 Javascript 传播的 ajax 调用中出现了问题。
在我看来也是...尝试您的建议...Tks)
没有足够的 jQuery 知识来处理这个问题。这样做可能很容易：如何使用 AJAX 加载函数加载这个脚本tympanus.net/codrops/2011/07/22/vertical-sliding-accordion？事实上，不希望你在这里浪费你的时间，如果这很耗时的话。谢谢）
比如打开窗格时加载每个窗格的内容？ JQUI 版本中有内置功能jqueryui.com/demos/accordion
知道了）应该是 onclick="loadDoc('sn','example.html');jQuery('#va-accordion').vaccordion();"非常感谢。你真的帮了我）