2

我真的不知道如何表达这个问题。但我想要实现的是从另一个 JavaScript（非 jQuery）函数运行/调用 jQuery 函数。

我正在尝试向JQ 轮播添加元素。

这就是它应该完成的方式：通过单击一个按钮。：

$('#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 添加函数。我遇到的问题是它说 carousel 变量是未定义的，我可以理解，因为它不在函数的范围内。

例子：

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 是未定义的，尽管它以前在页面上声明过。我做错了什么？

4

2 回答 2

2

只是把函数的$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-14T02:38:05.397 回答
0

$carouseldocument.ready在范围之外不可见，$carousel请在您的document.ready.

var $carousel; 
$(document).ready(function() {
    $carousel = $('#carousel').carousel({...
于 2012-05-14T02:39:04.390 回答