0

我正在尝试同时使用内容面板切换器 ( 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>
4

1 回答 1

0

冲突是两个插件的技术之间的冲突，而不是 jquery 中的任何东西。

两个大问题：

1) div#mySwipe(2) 元素在调用 setup() 函数时需要在页面上可见。Swipe 需要这个，所以它可以计算幻灯片的宽度。setup() 在滑动开始时调用，它也会在页面调整大小时以及在某些浏览器中切换浏览器选项卡时触发。你也可以自己调用它 mySwipe.setup()

content-panel 的 css 隐藏了 .switcher-content 中的所有内容。两个滑动 div 都属于此类。

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

2) 内容面板似乎可以通过显示 div 并根据需要从切换器内容 div 复制内容来工作。如果您在内容面板之后初始化滑动，您实际上将在面板副本上初始化滑动，一旦您导航到不同的面板，该副本将丢失，当您导航返回时，您将再次出现损坏的滑动。

你需要发生的是：

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

这三个任务需要更改您选择的插件的代码。

为了调试问题，我推荐各种浏览器开发工具。使用检查元素工具可以让您看到插件生成的 html，即当它是隐藏的 div 时，您会看到 swipe 将宽度设置为 0 而不是 3000。Javascript 调试可让您打破刷卡代码的设置方法并查看原因。

于 2013-05-14T16:26:54.157 回答