jQuery函數執行不正常

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>

知道如何解決這個問題嗎？ 它似乎與代碼執行的順序有關。

UPDATE

我注意到在控制台中，如果我在代碼執行之前調試器，我會在之后得到以下錯誤

已被追加。

 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函數執行不正常

問題描述

UPDATE

2 個解決方案

解決方案1
0 2016-03-04 12:41:53

解決方案2
0 2016-03-04 12:58:47

jQuery函數執行不正常

問題描述

UPDATE

2 個解決方案

解決方案1 0 2016-03-04 12:41:53

解決方案2 0 2016-03-04 12:58:47

解決方案1
0 2016-03-04 12:41:53

解決方案2
0 2016-03-04 12:58:47