Question

我正在尝试使用内容面板切换器（http://code.google.com/p/jquery-content-panel-switcher/）和Swipejs（http://swipejs.com/）。我能够让这两个独立工作，但是当我将swipejs代码放在其中一个内容面板中时，代码就会中断。我假设必须与jQuery发生冲突，但我对jQuery很新，而且我仍然坚持要调试这个问题。以下是我目前的代码。谢谢你的帮助。

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.content-panel-switcher.js'></script>  
<script type='text/javascript'>
$(document).ready(function() {
    jcps.fader(300, '#switcher-panel', '.set1');
    jcps.slider(500, '#switcher-panel2', '.set2');
});
</script>

<table>
<tr>
<td>
<div class="block mid margin_auto">
    <div class="header">
        <div class="nav_buttons"> 
            <a id="set1panel1" class="switcher set1">Home</a> 
            <a id="set1panel2" class="switcher set1">Photography</a> 
            <a id="set1panel3" class="switcher set1">Design</a> 
        </div> 
    </div>
        <div id="switcher-panel"></div>

        <!-- Dummy Data -->
        <div id="set1panel1-content" class="switcher-content set1 show">
            <h2>Set 1 Panel 1</h2>
            Set 1 Panel 1 content goes here.....
            <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
                <div class='swipe-wrap'>
                    <div><b>0</b></div>
                    <div><b>1</b></div>
                    <div><b>2</b></div>
                    <div><b>3</b></div>
                    <div><b>4</b></div>
                    <div><b>5</b></div>
                </div>
            </div>
            <div style='text-align:center;padding-top:20px;'>
              <button onclick='mySwipe.prev()'>prev</button> 
              <button onclick='mySwipe.next()'>next</button>
            </div>
        </div>
        <div id="set1panel2-content" class="switcher-content set1">
        <h2>Set 1 Panel 2</h2>
            Set 1 Panel 2 content goes here.....
        </div>
        <div id="set1panel3-content" class="switcher-content set1">
        <h2>Set 1 Panel 3</h2>
            Set 1 Panel 3 content goes here.....
        </div>
</div>
</td>
<td>
<div class="block mid margin_auto">
    <div class="header">
        <div class="nav_buttons"> 
            <a id="set2panel1" class="switcher set2">Experience</a> 
            <a id="set2panel2" class="switcher set2">Sports</a> 
            <a id="set2panel3" class="switcher set2">Hobbies</a> 
        </div> 
    </div>
        <div id="switcher-panel2"></div>

        <!-- Dummy Data -->
        <div id="set2panel1-content" class="switcher-content set2 show">
        <h2>Set 2 Panel 1</h2>
        Set 2 Panel 1 content goes here.....
            <div id='mySwipe2' style='max-width:500px;margin:0 auto' class='swipe'>
                <div class='swipe-wrap'>
                    <div><b>A</b></div>
                    <div><b>B</b></div>
                    <div><b>C</b></div>
                    <div><b>D</b></div>
                    <div><b>E</b></div>
                </div>
            </div>
            <div style='text-align:center;padding-top:20px;'>
              <button onclick='mySwipe.prev()'>prev</button> 
              <button onclick='mySwipe.next()'>next</button>
            </div>
        </div>
        <div id="set2panel2-content" class="switcher-content set2">
        <h2>Set 2 Panel 2</h2>
        Set 2 Panel 2 content goes here.....
        </div>
        <div id="set2panel3-content" class="switcher-content set2">
        <h2>Set 2 Panel 3</h2>
        Set 2 Panel 3 content goes here.....
        </div>
</div>
</td>
</tr>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='js/swipe.js'></script>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
  startSlide: 0,
  // auto: 3000,
  // continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
<script>
// pure JS
var elem = document.getElementById('mySwipe2');
window.mySwipe2 = Swipe(elem, {
  startSlide: 0,
  // auto: 3000,
  // continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>

Answer 1

冲突发生在两个插件的技术之间，而不是jquery中的任何内容。

两个大问题：

1）当调用setup（）函数时，元素div＃mySwipe（2）需要在页面上可见。滑动需要这样才能计算幻灯片的宽度。滑动启动时调用setup（），在切换浏览器选项卡时，也会在页面调整大小和某些浏览器中触发。您也可以自己调用mySwipe.setup（）

内容面板的CSS，隐藏了.switcher-content中的所有内容。两个滑动div都属于这样一个类。

您可以通过在内容面板之后初始化滑动来解决此问题，但由于问题二，这将是一个短期修复。

2）内容面板似乎通过显示div工作，并根据需要从切换器内容div复制内容。如果您在内容面板后初始化滑动，您实际上将初始化面板副本上的滑动，一旦您导航到另一个面板，此副本将丢失，当您向后导航时，您将再次刷卡。

您需要做的是：

当滑动调用最初设置时，它需要处于可见的div
修改swipe.js以便页面调整大小事件调用一个包装函数来检查滑动div是否可见，如果没有，则不执行任何操作。
理想情况下，每次刷卡面板可见时调用设置

这三项任务需要更改所选插件的代码。

要调试问题，我建议使用各种浏览器开发工具。使用inspect元素工具可以让你看到插件正在生成的html，也就是说，当它是一个隐藏的div时，你会看到swipe将宽度设置为0而不是3000。通过Javascript调试，您可以在滑动代码的设置方法中查看原因。

内容面板切换器＆amp; SwipeJS

1 个答案: