0

Jvectormap を使用し、onRegionClick 関数を使用して、.html() を使用して新しい div を開きます。

地図：

onRegionClick: function(event, code){
     var map = $('#map1').vectorMap('get', 'mapObject');
     nation = map.getRegionName(code);
     quest = getQUEST('1');
$('.map').html( '<div id="slideshow">SLIDER GOES HERE</div>');
$(".map").slideToggle("slow");

新しく作成された div Id の内部に、いくつかのスクリプト、関数、および css で構成されるスライダー (bxslider) を表示したいと思います。

スライダー (マップと同じ jquery バージョン):

 <script src="map/tests/assets/jquery-1.10.2.js"></script>
<!-- bxSlider Javascript file -->
<script src="slider/jquery.easing.1.3.js"></script>
<script src="slider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->

<link href="slider/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">$(document).ready(function(){
  $('.bxorga').bxSlider({
    captions: true, 
      auto: true,
});
});
</script>

私の最初のアプローチは、.html(function) を使用して関数を含め、$getScript() を介してスクリプトを含めることでした (以下を参照)。

$( ".map" ).html('<div id="slideshow"><ul class="bxorga"><li><img src="../images/pic1.jpg" width="700" height="250" /></li><li><img src="../images/pic2.jpg" width="700" height="250" /></li></div></div>')
    $.getScript("slider/jquery.bxslider.min.js");
    $('.map').html(function() {
     $(document).ready(function(){
     $('.bxorga').bxSlider({
    captions: true, 
    auto: true,

しかし、成功しませんでした。

私はさらにしようとしました

  • スライダー全体を .load (#div) 経由で新しい div にロードします。

  • スライダーを単一のスクリプトに入れ、$getScript()、ajax などを介してロードしようとしました。

しかし、何も機能していないようでした

私はほとんどすべてを試しましたが、これを行うための最良の方法を理解することはできません. スライダーを .html(div) タグ内で実行することは不可能のようですが、これが異なるスクリプト間の競合によるものなのか、コールバックがないのか、単に不可能なのかはわかりません。

助けてくれてありがとう！

4

0 に答える 0