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函数的按钮，然后触发Carousel的jQuery添加功能。我遇到的问题是它说carousel变量是未定义的，我可以理解，因为它不在函数的范围内。

示例：

HTML - ＆gt;

<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的轮播 - ＆gt; JQ Carousel）

<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。因为相同的值会反映在您引用$carousel的所有其他位置。

Answer 2

在$carousel范围内无法看到

document.ready，请在$carousel中声明document.ready。

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

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

2 个答案: