Question

我有三个<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_.......

完整的堆栈跟踪事先显示了我的代码行。

Answer 1

您必须将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="jquery@2.2.0" 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>

Answer 2

<强> 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

jQuery函数执行不正常

更新

2 个答案: