toggle（）后如何避免3次重复bxslider;

Question

我试图切换bxslider。但是在切换之后，bxslider会将图像创建为3次。

<div style="float:left; width: 50%; height: 250px;" class="proj-5">                 
    <ul class="slider slider1 left">            
        <li style="background-image: url(http://local.fundhive.com/images/newsroom/8b/ea/8bea_fi_en8bea1754_ba81_df2e_7e83_1e617756c2e1.jpg);"></li>
        <li style="background-image: url(http://local.fundhive.com/images/newsroom/8e/45/8e45_fi_en8e455531_7618_2aba_3330_b372fdd99db2.jpg);"></li>
     </ul>                                              
</div>

<div style="float:left; width: 50%; height: 250px; display:none" class="proj-6">                 
    <ul class="slider slider1 left">
        <li style="background-image: url(http://local.fundhive.com/images/newsroom/30/15/3015_fi_en3015d80c_b110_8a62_3f58_7b94dc82e9fb.jpg);"></li>
        <li style="background-image: url(http://local.fundhive.com/images/newsroom/42/6b/426b_fi_en426b793f_a52f_d01d_1d53_53db562e8cde.jpg);"></li>            
     </ul>                                              
</div>
<script>
    $('.proj-property-id').click(function(event) {
            $('.proj-5').toggle();
            $('.proj-6').toggle();
    });
</script>

切换前

：

切换后

：

Answer 1

隐藏和显示bxSlider时，您应该使用它的redrawSlider()方法。以下是相关的JQuery：

//multiplication method
    public IntValue Multiply(IntValue multiplier) {
        StringBuilder product = new StringBuilder();

        int pos = 0;

        for (int i = multiplier.getValue().length() - 1; i >= 0; i--) {
            int currentPosition = pos++;
            int carry = 0;
            int multiplierDigit = Character.getNumericValue(multiplier.getValue().charAt(i));

            for (int j = value.length() - 1; j >= 0; j--) {
                int multiplicandDigit = Character.getNumericValue(value.charAt(j));

                int tempProduct = currentPosition < product.length()
                        ? Character.getNumericValue(product.charAt(currentPosition)) : 0;
                int currentProduct = (multiplicandDigit * multiplierDigit) + carry + tempProduct;

                if (currentProduct > 9) {
                    carry = currentProduct / 10;
                    currentProduct = currentProduct % 10;
                }

                if (currentPosition < product.length()) {
                    product.setCharAt(currentPosition, Character.forDigit(currentProduct, 10));
                } else {
                    product.append(currentProduct);
                }

                ++currentPosition;
            }

            if (carry > 0) {
                if (currentPosition < product.length()) {
                    product.setCharAt(currentPosition, Character.forDigit(carry, 10));
                } else {
                    product.append(carry);
                }
            }
        }
        return new IntValue(product.reverse().toString());
    }



//number1 and number2 are IntValues.
//power method
    public IntValue Power(long n) {
        IntValue result = new IntValue("1");

        for(int i = 0; i < n; i++) {
            result = result.Multiply(this);
        }

        return result;
    }

System.out.println("Result = "+number1.Power(Long.parseLong(number2.toString())));

段

// <<$(document).ready()>> equivalent
$(function() {

  // instantiate bxSlider seperately  
  var bx1 = $('.bx1').bxSlider();
  var bx2 = $('.bx2').bxSlider();

  // Use `.on` method to handle binding to a dynamically created element.
  $('.toggle').on('click', function(e) {

    // Changed `toggle()` to `toggleClass()` because it's versatile.
    $('.layer').toggleClass('on off');

    // Ternary: if `.1st` has class '.on'| then: call bxSlider method redrawSlider() on bx1, if not, then:
    ($('.lst').hasClass('on')) ? bx1.redrawSlider(): bx2.redrawSlider();
  });
});

$(function() {
  var bx1 = $('.bx1').bxSlider();
  var bx2 = $('.bx2').bxSlider();
  $('.toggle').on('click', function(e) {
    $('.layer').toggleClass('on off');
    ($('.lst').hasClass('on')) ? bx1.redrawSlider(): bx2.redrawSlider();
  });
});

.toggle {
  display: block;
  margin: 10px auto;
}
.layer {
  position: relative;
}
.on {
  display: block !important;
}
.off {
  display: none !important;
}
img {
  display: block;
  margin: 10px auto;
}