Question

我有多张图片。

<img src="fruits/lychee.png" class ="fruit" id="fruitl156">
<img src="fruits/cranberry.png" class ="fruit" id="fruitl141">
<img src="fruits/avocado.png" class ="fruit" id="fruitl214">

当页面加载时，将显示随机数量的图像。我想通过一系列函数一次传递每个可见图像ID。

var ID = '';
$('#getIDs').click(function(){
   ID = $('.fruit:visible').map(function () {
      return this.id;
   }).get();
});

这些是我想一次传递每个ID的一系列功能。

function showInfo( anID, var2, var3 ){
    //do something 
    getThumbs( anID, newvar1);
});
function getThumbs( anID, newvar1){
    //do something
    showRates( anID, anothervar1, anotherVar2); 
});
function showRates( anID, anothervar1, anotherVar2){
    //do something 
});

因此，当第一个ID通过所有函数时，第二个ID将通过函数发送，依此类推......我该怎么做？

编辑：

这是一系列功能。每个函数都会触发下一个函数。

Answer 1

这个怎么样？

$('#getIDs').click(function(){
   $('.fruit:visible').each(function () {
      thisId = this.id;
      showInfo( thisId, var2, var3 );
      getThumbs( thisId, newvar1);
      showRates( thisId, anothervar1, anotherVar2);
   });
});

Answer 2

我相信这就是你想要的。

获取所有ids可见图像然后使用它来调用各自的函数不是一个好主意。

我做了什么：

通过class选择器（水果）获取所有元素并遍历所有图像。
检查循环内部当前图像是否可见，并为每个图像实例调用相应的功能。

JS代码：

function showInfo( anID, var2, var3 ){
   var newvar1;
   //do something with var`s & assign result to newvar1
  return newvar1;
});
function getThumbs( anID, newvar1){
   var arr[]; 
   //do something with newvar1 and generate anothervar1, anotherVar2
   arr[0] = anothervar1;
   arr[1] = anothervar2;
   return arr;
});

// array arr contains 2 variable definitions 'anothervar1, anotherVar2'
function showRates( anID, arr){
   //final process array arr do required operation
});

$('.fruit').each(function(){
   var $curElement = $(this);
   var $id = $curElement.attr('id');
   var ret;
   if ($curElement.is(":visible")){
     //get the parameters required for the below function and pass it.
     ret = howInfo( $id, var2, var3 );
     ret = getThumbs( $id, ret);
     showRates( $id, ret);
  }
});

通过一系列功能一次传递一个ID

2 个答案: