jquery - 如何选择jquery中的所有id？

Question

描述：我有很多类名如下的 div：

<div class="flipbox1">,<div class="flipbox2">,
             <div class="flipbox3">,<div class="flipbox4"> 

等等

我正在选择这个div：

$(document).ready(function(){
  var id=$('#img-txt a').attr('id').replace('flip','');
  $("#flip"+id).on("click",function(e){
        $(".flipbox"+id).flippy({
            color_target: "red",
            direction: "left",
            duration: "750",
            verso: "<span>Woohoo ! \\o/</span>",
         });
         e.preventDefault();
    });
});

所需的js是：http: //blog.guilhemmarty.com/flippy/jquery.flippy.min.js

问题是 var id 只获得第一个 div 的 classes 值。所以只有第一个 div 在翻转。

我认为这可以使用循环来完成。如何使用它。

Answer 1

var id=$('#img-txt a').attr('id').replace('flip','');

这不会为您提供所有 ID，您需要遍历每个元素以提取 ID，如下所示：

$( "#img-txt a" ).each(function( index ) {

var id=$(this).attr('id').replace('flip','');
$("#flip"+id).on("click",function(e){
        $(".flipbox"+id).flippy({
            color_target: "red",
            direction: "left",
            duration: "750",
            verso: "<span>Woohoo ! \\o/</span>",
         });
         e.preventDefault();
    });
});

Answer 2

遍历所有链接并获取循环中每个链接的 id：

$('#img-txt a').each(function() {
  var id = $(this).attr('id').replace('flip','');
  $(this).on("click", function(e){
    $(".flipbox"+id).flippy({
      color_target: "red",
      direction: "left",
      duration: "750",
      verso: "<span>Woohoo ! \\o/</span>",
    });
    e.preventDefault();
  });
});

演示：http: //jsfiddle.net/bEeDu/

或者，在所有链接上绑定相同的事件，并在事件处理程序中获取单击链接的 id：

$('#img-txt a').click(function(e){
  var id = $(this).attr('id').replace('flip','');
  $(".flipbox"+id).flippy({
    color_target: "red",
    direction: "left",
    duration: "750",
    verso: "<span>Woohoo ! \\o/</span>",
  });
  e.preventDefault();
});

演示：http: //jsfiddle.net/bEeDu/1/

Answer 3

尝试这样的事情：

var myFunction = function(e) {
     $(".flipbox"+id).flippy({
        color_target: "red",
        direction: "left",
        duration: "750",
        verso: "<span>Woohoo ! \\o/</span>",
     });
     e.preventDefault();
}

for (var i=0; i<numberOfDivs; i++){    // number of divs should be known
   $(".flip"+i).on("click",myFunction);  // where flip is the class name
}