0

我需要有关如何将变量从 jQuery click 函数传递到另一个插件函数的参数的帮助。在下面的代码中，我需要将 click 函数中的 'imagePathArray' 传递给 $(this).reel 中的 images 参数。这行得通吗？到目前为止，我似乎无法让它工作。任何帮助表示赞赏。
这是我的代码：

$(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 两次才能将图像填充到页面上。它第一次正确通过（通过 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 回答
0

我让它工作了

   $(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;
firstImagePath = imagePathArray[0];
$('#image').trigger('teardown');//MOVED TO HERE TO INITIALISE TEARDOWN ON CLICK.
$('#image').attr('src', firstImagePath).fadeOut('fast', function () {
    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
于 2012-04-12T16:44:08.840 回答