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追加機能がトリガーされるようにします。私が抱えている問題は、カルーセル変数が未定義であると言われていることです。これは、関数のスコープ内にないため理解できます。

例：

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 is undefined を取得しています。私が間違っていることは何ですか？

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

$carouselはdocument.readyスコープ外では見えません。あなたの外で宣言$carouselしてくださいdocument.ready。

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