運行從另一個函數調用的jQuery函數

我真的不知道如何表達這個問題。但我想要實現的是從另一個JavaScript（非jQuery）函數運行/調用jQuery函數。運行從另一個函數調用的jQuery函數

我試圖將元素添加到JQ carousel.

這是它應該是怎樣做：通過點擊一個按鈕。：

$('#carousel_add').on('click', function(ev) { 
    $carousel.carousel('reset'); 
    $carousel.append('<div class="carousel_box"> Page '+(z)+' <br/><img src="http://place.to/my/picture/file'+dir+'/0'+z+'.png" width="100px" height="50px"> </div>'); 
    $carousel.carousel('refresh'); 
    document.getElementById('carousel_next').disabled = false; 
    document.getElementById('carousel_prev').disabled = true; 
});

我想不做添加按鈕。我想要一個觸發JavaScript函數的按鈕，然後觸發Carousel的jQuery添加函數。我遇到的問題是，它說旋轉木馬變量是未定義的，我可以理解，因爲它不在函數的範圍內。

實施例：

HTML - >

<input type="button" value="Load Pages" function="loadPages();">

的JavaScript（否jQuery的參與）

<script type="text/javascript"> 
function loadPages() 
{ 
myImage = new Image(); 
myImage.src = "http://path.to/image/file.png"; 
//The image is loaded. 
//Now I want to add this image to the JQ Carousel 
addCarousel(myImage.src); 
} 
</script>

的JavaScript（基於jQuery的轉盤 - > JQ傳送帶）

<script type="text/javascript"> 

$(document).ready(function(e) { 

    var $carousel = $('#carousel').carousel({ 
     group: 6, 
     indicator: false 
     }), 
     $prev = $('#carousel_prev'), 
     $next = $('#carousel_next'), 
     set_state = function() { 
     var state = $carousel.carousel('getMoveState'); 
     switch (state) { 
     case 'min': 
      $prev.prop('disabled', 'disabled'); 
      $next.prop('disabled', ''); 
      break; 
     case 'max': 
      $prev.prop('disabled', ''); 
      $next.prop('disabled', 'disabled'); 
      break; 
     case true: 
      $prev.prop('disabled', ''); 
      $next.prop('disabled', ''); 
      break; 
     default: 
      $prev.prop('disabled', 'disabled'); 
      $next.prop('disabled', 'disabled'); 
     } 
     }; 
     num = 1; 

    $('#carousel_prev').on('click', function(ev) { 
     $carousel.carousel('prev'); 
    }); 
    $('#carousel_next').on('click', function(ev) { 
     $carousel.carousel('next'); 
    }); 
    // ... 
    $carousel.bind({ 
     'Carousel.next': function() { 
     set_state(); 
     }, 
     'Carousel.prev': function() { 
     set_state(); 
     } 
    }); 

</script>

現在是應該的功能，將其添加

function addCarousel(image) 
{ 
     $carousel.carousel('reset'); 
     $carousel.append('<div class="carousel_box"> Page '+(num++)+' <br/><img src="'+image+'" width="100px"> </div>'); 
     $carousel.carousel('refresh'); 
     document.getElementById('carousel_next').disabled = false; 
     document.getElementById('carousel_prev').disabled = true; 
    }) 


}

在旋轉木馬所在的HTML：

<div class="carousel"> 
    <div id="carousel" class="carousel_inner"> 

    <div class="carousel_box"> Page 1 <br/><img src="http://path/to/image/file.png" width="100px"></div> 
    </div> 

    </div> 
    <p class="btns"> 
    <input type="button" id="carousel_prev" value="prev" disabled> 
    <input type="button" id="carousel_next" value="next" > 
    <input type="button" id="carousel_add" value="add"> 
    </p> 
</div>

我得到$旋轉木馬是不確定的，但它以前在頁面上聲明。我做錯了什麼？

來源

2012-05-14 Jose A

只要把$carousel以外的document.ready函數。

這樣的..

<script type="text/javascript"> 
var $carousel = null; 
$(document).ready(function(e) { 

    $carousel = $('#carousel').carousel({//notice i removed "var " 
     group: 6, 
     indicator: false 
    }), 
....

早些時候，可變$carousel僅僅是document.ready事件的匿名處理程序中可見。將它移動到外面，將使該變量具有全局可見性。所以，現在你可以在腳本的任何地方使用這個變量。

另外，請注意更新$carousel。因爲相同的值將會反映在您引用的所有其他地方$carousel。

來源

2012-05-14 02:38:05

謝謝。這也有很大幫助！：D –

$carousel在document.ready範圍之外是不可見的，在document.ready之外聲明$carousel。

var $carousel; 
$(document).ready(function() { 
    $carousel = $('#carousel').carousel({...

來源

2012-05-14 02:39:04

你是個天才！：p非常感謝！它完美地完成了XD的工作 –

運行從另一個函數調用的jQuery函數

回答

相關問題