0

jQueryクリック関数から別のプラグインの関数のパラメーターに変数を渡す方法についてのヘルプが必要です。以下のコードでは、クリック関数から$（this）.reelのimagesパラメーターに「imagePathArray」を渡す必要があります。これは機能しますか？これまでのところ、私はそれを機能させることができないようです。どんな助けでも大歓迎です。
これが私のコードです：

$(document).ready(function(){
  $('a.image-selector').click(function (event) {

    event.preventDefault();

    // Work out which image to display, amend the displaying image then load the rest and fade in.              
    whichImageInput = $(this).data('which');
    imagePathImages = $('#imageSequence-' + whichImageInput).attr('value');
    imagePathArray = imagePathImages.split(','); 
    totalFrames = imagePathArray.length;
    imagePath = imagePathArray[0];



    //alert(imagePathArray[0]);
    //alert(whichImageInput);
    $('#image').attr('src', imagePath).fadeOut('fast', function () {
        //DisplayImages(whichImageFolder);
        DisplayImages(imagePathArray[0]);
    });
  });



 DisplayImages('Kachina');

function DisplayImages(whichInput) {

    //function DisplayImages(whichFolder) {
    //var imagePath = 'images/' + whichFolder + '/';
    // Call this to destroy any existing reference before initialising...
    $('#image').trigger('teardown');
    // Needs a bit more thought when swapping between colours.          
    $('#image').fadeIn('fast', function () {


        $(this).reel({
            frames: totalFrames,
            //footage: 4,
            sensitivity: 70,
            saves: true,
            //path: imagePath,
            cw: true,
            hint: "Click and drag",
            clickfree: false,
            preloader: 20,

            images: imagePathArray
        });
    });
}
});

編集 わかりました、これは私が今以下からの提案のいくつかを使用しているコードです。ただし、画像をページに表示するには、a.image-selectorを2回クリックする必要があります。最初は正しく合格しますが（alert（）でテスト）、タグ内の実際の画像が最初に入力されていません。HTMLも含めます。$（document）.ready（function（）{$（'a.image-selector'）。click（function（event）{

    event.preventDefault();

    // Work out which image to display, amend the displaying image then load the rest and fade in.              
    // var whichImageFolder = $(this).data('which');
    //var imagePath = 'images/' + whichImageFolder + '/0001.png';
    whichImageInput = $(this).data('which');
    imagePathImages = $('#imageSequence-' + whichImageInput).attr('value');
    imagePathArray = imagePathImages.split(',');
    totalFrames = imagePathArray.length;
    firstImagePath = imagePathArray[0];

    //alert(imagePathArray[0]);
    //alert(whichImageInput);
    $('#image').attr('src', firstImagePath).fadeOut('fast', function () {
        //DisplayImages(whichImageFolder);
        DisplayImages(firstImagePath, $(this));
    });
});


function DisplayImages(whichInput, cntrl) {

    //function DisplayImages(whichFolder) {
    //var imagePath = 'images/' + whichFolder + '/';
    // Call this to destroy any existing reference before initialising...
    $('#image').trigger('teardown');
    // Needs a bit more thought when swapping between colours.          
    $('#image').fadeIn('fast', function () {
       // alert(imagePathArray);
        $(cntrl).reel({
            frames: totalFrames,
            //footage: 4,
            sensitivity: 70,
            saves: true,
            //path: imagePath,
            cw: true,
            hint: "Click and drag",
            clickfree: false,
            preloader: 20,

            images: imagePathArray
        });
    });
  }
 });//End doc.ready

以下のHTML

   <div class="block">
        <div class="imgHolder">
            <img id="image" src="" height="448" width="360" />
        </div>
    </div>
  <!--Thumbs-->

    <ul class="tabs">
        <li><a href="#" class="image-selector" data-which="Kachina"><img src="images/smooshed150dpi/Kachina0001.png" width="150" /></a></li>
        <li><a href="#" class="image-selector" data-which="Lapis"><img src="images/Lapis/Lapis_Thumb.png" width="150" /></a></li>

    </ul>

        <input type="hidden" id="imageSequence-Kachina" value="images/Kachina/0001.png, images/Kachina/0002.png, images/Kachina/0003.png, images/Kachina/0004.png, images/Kachina/0005.png, images/Kachina/0006.png, images/Kachina/0007.png, images/Kachina/0008.png, images/Kachina/0009.png, images/Kachina/0010.png,
                     images/Kachina/0011.png, images/Kachina/0012.png, images/Kachina/0013.png, images/Kachina/0014.png, images/Kachina/0015.png, images/Kachina/0016.png, images/Kachina/0017.png, images/Kachina/0018.png, images/Kachina/0019.png, images/Kachina/0020.png,
                     images/Kachina/0021.png, images/Kachina/0022.png, images/Kachina/0023.png, images/Kachina/0024.png, images/Kachina/0025.png, images/Kachina/0026.png, images/Kachina/0027.png, images/Kachina/0028.png, images/Kachina/0029.png, images/Kachina/0030.png,
                     images/Kachina/0031.png, images/Kachina/0032.png, images/Kachina/0033.png, images/Kachina/0034.png, images/Kachina/0035.png, images/Kachina/0036.png" />

         <input type="hidden" id="imageSequence-Lapis" value="images/Lapis/0001.png, images/Lapis/0002.png, images/Lapis/0003.png, images/Lapis/0004.png, images/Lapis/0005.png, images/Lapis/0006.png, images/Lapis/0007.png, images/Lapis/0008.png, images/Lapis/0009.png, images/Lapis/0010.png,
                     images/Lapis/0011.png, images/Lapis/0012.png, images/Lapis/0013.png, images/Lapis/0014.png" />
4

3 に答える 3

1

イベントを発生させたコントロールを参照/変数として関数に送信します。

DisplayImages(imagePathArray[0], $(this));

関数は次のようになります。

function DisplayImages(whichInput, cntrl) {

と

$(cntrl).reel({
于 2012-04-11T18:03:34.507 に答える
0

imagePathArray をグローバル変数にするのはどうですか??

行の後かもしれません

$(document).ready(function(){

あなたが持つことができます

var imagePathArray;

この方法imagePathArrayは、jquery 名前空間のどこでも利用できます

于 2012-04-11T18:00:54.047 に答える