开发者问题收集

jQuery 函数无法正确执行

2016-03-04
130
javascript jquery magento

我有三个 <ul> ，我想将它们合并并变成一个滑块（我使用的是 bxslider ）。它类似于... 

<div class="wrapper">
    <ul class="products-grid">
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
    </ul>
    <ul class="products-grid">
        <li>Product 4</li>
        <li>Product 5</li>
        <li>Product 6</li>
    </ul>
    <ul class="products-grid">
        <li>Product 7</li>
        <li>Product 8</li>
        <li>Product 9</li>
    </ul>
</div>

当我在 chrome 控制台中一次一行地执行以下几行 jQuery 时，一切都运行正常。 

jQuery('ul.products-grid').children('li').appendTo('ul.products-grid:first'); 
jQuery('ul.products-grid').not(':first').remove(); 
jQuery('ul.products-grid').bxSlider({
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 3,
    slideMargin: 10
});

但是当我尝试在 php/html 模板或 chrome 控制台中同时执行 jQuery 时，只有第一行会执行，剩下... 

<div class="wrapper">
    <ul class="products-grid">
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
        <li>Product 4</li>
        <li>Product 5</li>
        <li>Product 6</li>
        <li>Product 7</li>
        <li>Product 8</li>
        <li>Product 9</li>
    </ul>
    <ul class="products-grid">
    </ul>
    <ul class="products-grid">
    </ul>
</div>

有什么想法可以解决此问题吗？这似乎与代码执行的顺序有关。

更新

我注意到，如果我在代码执行之前打开调试器，在控制台中，在附加

  • 后会出现以下错误。 

    • Uncaught ReferenceError: optionsPrice is not defined    bundle.js 110

    这一定引起了一些冲突。这是来自 bundle.js 的完整函数 

    reloadPrice: function() {
    var calculatedPrice = 0;
    var dispositionPrice = 0;
    var includeTaxPrice = 0;
    for (var option in this.config.selected) {
        if (this.config.options[option]) {
            for (var i=0; i < this.config.selected[option].length; i++) {
                var prices = this.selectionPrice(option, this.config.selected[option][i]);
                calculatedPrice += Number(prices[0]);
                dispositionPrice += Number(prices[1]);
                includeTaxPrice += Number(prices[2]);
            }
        }
    }

    var event = $(document).fire('bundle:reload-price', {
        price: calculatedPrice,
        priceInclTax: includeTaxPrice,
        dispositionPrice: dispositionPrice,
        bundle: this
    });
    if (!event.noReloadPrice) {
        optionsPrice.specialTaxPrice = 'true';  // line 110
        optionsPrice.changePrice('bundle', calculatedPrice);
        optionsPrice.changePrice('nontaxable', dispositionPrice);
        optionsPrice.changePrice('priceInclTax', includeTaxPrice);
        optionsPrice.reload();
    }

    return calculatedPrice;
},

    在

  • 中有一个脚本标记... 

    • <script type="text/javascript">
        //<![CDATA[
        var bundle = new Product.Bundle({"options":{"98":{"selections":{"2307":{"qty":1,"customQty":"0","price":2.5,"priceInclTax":1.88,"priceExclTax":1.88,"priceValue":0,"priceType":"0","tierPrice":{"32000-7":{"price_id":"738","website_.......

    完整的堆栈跟踪显示了我之前的代码行。

    2个回答

    您必须将您的 jquery 代码放入 jquery ready 函数中： 

    $(function() {
  jQuery('ul.products-grid').children('li').appendTo('ul.products-grid:first'); 
  jQuery('ul.products-grid').not(':first').remove(); 
  jQuery('ul.products-grid').bxSlider({
      slideWidth: 200,
      minSlides: 1,
      maxSlides: 3,
      slideMargin: 10
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="wrapper">
      <ul class="products-grid">
          <li>Product 1</li>
          <li>Product 2</li>
          <li>Product 3</li>
      </ul>
      <ul class="products-grid">
          <li>Product 4</li>
          <li>Product 5</li>
          <li>Product 6</li>
      </ul>
      <ul class="products-grid">
          <li>Product 7</li>
          <li>Product 8</li>
          <li>Product 9</li>
      </ul>
    </div>
  </body>

</html>
    Sam Bauwens
    2016-03-04

    HTML 

    <div class="wrapper">
<ul class="products-grid">
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
</ul>
<ul class="products-grid">
    <li>Product 4</li>
    <li>Product 5</li>
    <li>Product 6</li>
</ul>
<ul class="products-grid">
    <li>Product 7</li>
    <li>Product 8</li>
    <li>Product 9</li>
</ul>

    CSS 

        body{color:#000;}
li {
  font-size: 18px;
  line-height: 50px;
}
.wrapper{
  height: 200px;
  background: #d8d8d8;
}

    JS 

        jQuery('ul.products-grid').children('li').appendTo('.wrapper ul.products-grid:first'); 
jQuery('.wrapper ul.products-grid').not(':first').remove(); 
jQuery('ul.products-grid').bxSlider({
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 3,
    slideMargin: 10
});

    请在我的 codepen 个人资料中查看已解决的答案。 http://codepen.io/prashen/pen/pyjRvo

    Prashen
    2016-03-04