运行从另一个函数调用的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函数

回答

相关问题