1

我目前遇到危险的刷卡问题。我使用该顺序中包含的以下库：

  • jQuery 1.9.1
  • jQuery 移动 1.4.5
  • 危险的 Swiper (jQuery) 3.0.6

在通过 javascript 将 swiper 添加到 DOM 之前，我正在对其进行修改以满足我的需要。

最后生成以下 html 代码，该代码应符合 api 的需求：

<div class="tx-cctest-pi1">
        <div class="cctest-gallery-link" id="pageId-13">
            <div class="swiper-13 swiper-container">
               <div class="swiper-wrapper">
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild1.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild2.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild3.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild4.jpg">
                  </div>
               </div>
            </div>
            <div class="albumName">Architektur</div>
        </div>
</div>

代码是动态生成的，应该生成多个 swiper（因此类名为swiper- X）。

将滑动条添加到元素的代码如下：

new Swiper('.swiper-'+ pageId, {
    direction: 'horizontal',
    loop: true,
    preloadImages: true,
    updateOnImagesReady: true,
    grabCursor: true
});

控制台没有错误，刷卡器不刷卡。

更新 问题已解决。enigma在证明代码在没有 AJAX 的情况下似乎可以正常工作后检查代码。正如下面的评论中提到的，enigma问题的帖子是 ajax 调用甚至没有完成，但是已经创建了 swiper。因此，将 Swiper 构造放在一切的done()回调中工作正常。$.ajax

4

1 回答 1

3

鉴于您问题中的代码，以及您确定页面 id 正确的事实，我生成了这个 JSfiddle，这表明它运行良好。错误显然不在引用的代码中。

查看您评论中的代码笔，一些错误很明显：

  • <div class="test"-gallery-link link-left" id="pageId-13">应该是 <div class="test-gallery-link link-left" id="pageId-13">，注意去掉"

  • 最后有一个额外的不必要</div>的

  • 在回调内部，this指的是 Ajax 调用的jqXHR对象，而不是事件处理程序绑定到的元素。所以$(this)可能没有做你认为的那样。我通过对 url 进行硬编码而不是使用var url = $(this).attr('src');来解决此问题，您可能希望$(this)在输入 ajax 调用之前通过存储来修复它。

解决这些问题后，我将您所有的 codepen 代码放入带有正确链接库的 JSfiddle 中，并删除了移动检查和 ajax 调用（直接跳过done()）。

进行上述更改后，JSfiddle似乎正在大致执行您希望它执行的操作。

于 2015-04-22T18:53:54.597 回答