Question

我需要有关如何将变量从jQuery单击函数传递到另一个插件的函数参数的帮助。在下面的代码中，我需要将点击功能中的'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。 $（文件）。就绪（函数（）{ $（'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" />

Answer 1

将引发事件的控件作为参考/变量发送给函数。

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

该功能如下所示：

function DisplayImages(whichInput, cntrl) {

和

$(cntrl).reel({

Answer 2

如何使imagePathArray成为一个全局变量。??

可能在行

之后

$(document).ready(function(){

你可以

var imagePathArray;

这种方式imagePathArray将在jquery命名空间的任何地方都可用

Answer 3

我得到了它的工作

   $(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

如何将点击函数中的变量传递给jQuery中的另一个函数的参数？

3 个答案: