Question

我正在尝试动态翻转内容，这是我的html内容

<div id="card<?php echo $employees->id; ?>" class="card">
       <div class="front">
             //content for front              
       </div>
       <div class="back">
            //content for back
       </div>
 </div>

我使用了jquery翻转插件。它工作正常，但在这里我需要让它变得动态。为此，我尝试了下面的代码

    $('.card').mouseenter(function(){
                var card_id = $(this).attr('id');
                //alert(card_id);

                $(this).attr('id').flip({
                    axis: "x", // y or x
                    reverse: false, // true and false
                    trigger: "hover", // click or hover
                    speed: 500
               }); 
 });

它不起作用，但如果我尝试单个div，它就可以了。

$("#card2").flip({
                axis: "x", // y or x
                reverse: false, // true and false
                trigger: "hover", // click or hover
                speed: 500
 });  //it's working

如何使jquery选择器中的所有内容动态化？

Answer 1

试试这个：你在.flip()上调用$(this).attr('id')，它返回id而不是jquery对象。在$(this)上调用函数，如下所示。

$('.card').mouseenter(function(){
                var card_id = $(this).attr('id');
                //alert(card_id);

                $(this).flip({
                    axis: "x", // y or x
                    reverse: false, // true and false
                    trigger: "hover", // click or hover
                    speed: 500
               }); 
 });

Answer 2

只需致电$(this).flip({

您不需要使用.attr

你需要在jquery对象上调用.flip而不是id属性。

Answer 3

试试这个。

aColor

Jquery daynamic id选择问题

3 个答案: