jquery - 运行从另一个函数调用的 jQuery 函数

Question

我真的不知道如何表达这个问题。但我想要实现的是从另一个 JavaScript(非 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 函数，然后触发轮播的 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>

我发现 $carousel 未定义，尽管它之前已在页面上声明过。我做错了什么？

Answer 1

只需将 $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。因为相同的值将反射(reflect)在您引用的所有其他位置 $carousel。