Question

我正在一个包含3列的表格中开发一个反馈页面。

Name         Feedback icons          status
-------------------------------------------------
Name1        icon1 icon2 icon3       Saved
Name2        icon1 icon2 icon3       Saved
-------------------------- and so on....

最初第3列是css属性visibility:hidden。点击任何图标后，该行的第3列需要显示为＆＃39;已保存＆＃39;然后消失它第一次为我工作，即如果我在第一行第一次点击icon2，保存将显示并消失，当我在同一行点击icon1时，它将不会显示第3栏。

单击下一行时，第3列将仅在第一次单击时出现。请帮帮我。

HTML

<table class="tbl_result">
   <tbody>
    <tr><td width="55%">Nahed </td>
       <td width="42%">
         <div id="tbl_row_icons0" class="tbl_row_icons">
          <div class="emoji_parent">
           <div class="emoji_2 emojichild">
            <a title="Poor" class="feedbck_name" href="#"><img src="/user_uploads/my.aisc.ac.cy/emoticon/poor.png"></a>
           </div>
         <!--second icon--!>
          <div class="emoji_3 emojichild"><a title="Good" class="feedbck_name" href="#"><img src="/user_uploads/my.aisc.ac.cy/emoticon/good.png"></a>
         </div>
       </div>
      </td><td width="7%" class="toggle_save">Saved</td>
   </tr>
  </tbody>
 </table>

CSS

.toggle_save
{
    visibility:hidden;
    color:green;
    font-weight: bold;
}

Jquery功能

//click event for icon 
$(".feedbck_name").click(function()
{    
   $(this)
       .closest('td')
       .next('td.toggle_save')
       .css('visibility','visible')
       .delay(1000)
       .fadeOut();

   return false;
});

Answer 1

当您正在执行fadeOut（）时，您的脚本将在css属性中显示：none。你需要淡化可见性。请尝试以下相同的代码

$(".feedbck_name").click(function()
{    
   $(this).parent('td').siblings('td.toggle_save')
    .css('opacity','1')
    .css("visibility", "visible")
    .fadeTo(1500, 0, function(){
         $(this).parent('td').siblings('td.toggle_save')
         .css("visibility", "hidden").css('opacity','1');   
    });
    return false;
});

检查this fiddle是否相同

Visibility属性与fadeOut（）无法正常工作

1 个答案: