使用removeAttr不适用于我

我有一个图像，在您用鼠标悬停后显示。当我点击图像时，我希望图像通过使用removAttr方法保持不动。但使用removeAttr似乎不适用于我....感谢您的任何建议。使用removeAttr不适用于我

这里是我的HTML标记

<table class="ovalControl"> 
    <tr> 
     <td class="oval"> 
     </td> 
     <td class="ovalSibling" align="center" > 
      <div id="divOvalSibling" style="height:15px; width:30px;"> 
       <img id="imgOvalSibling" 
        height="15px" 
        width="30px" 
        src="../Images/sib.PNG" 
        alt="" 
        onclick="respond0(); return false;" 
        style="display:none"/> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="ovalChildWidth" align="center"> 
      <div id="divOvalChild" style="height:25px; width:20px;"> 
      <img id="imgOvalChild" 
       height="25px" 
       width="20px" 
       src="../Images/Child.PNG" 
       alt="" 
       onclick="respond1(); return false;" 
       style="display:none"/> 
      </div> 
     </td> 
     <td class="blank"> 
      &nbsp;</td> 
    </tr> 
</table>

这里是我的jQuery代码：

<script language="javascript" type="text/javascript"> 

     var prmRegister = Sys.WebForms.PageRequestManager.getInstance(); 
      prmRegister.add_initializeRequest(initializeRequest); 
      prmRegister.add_endRequest(endRequest); 

     $(document).ready(function() { 
      $('#divOvalSibling').hover(
      function() {$('#imgOvalSibling').show();}, 
      function() {$('#imgOvalSibling').hide();}) 
     }) 

     $(document).ready(function() { 
      $('#divOvalChild').hover(
      function() { $('#imgOvalChild').show();}, 
      function() { $('#imgOvalChild').hide();}) 
     }) 

     function initializeRequest(sender, args) { 
     } 

     function endRequest(sender, args) {    
     } 

     function respond0() { 

      var startX = $("#imgOvalSibling").offset().left + 15; 
      var startY = $("#imgOvalSibling").offset().top + 7; 

      $("#respond0").drawLine(startX, startY, 850, 250); 
      $("#imgOvalSibling").removeAttr("style"); 
     } 

     function respond1() { 

      var startX = $("#imgOvalChild").offset().left + 10; 
      var startY = $("#imgOvalChild").offset().top + 12; 

      $("#respond1").drawLine(startX, startY, 400, 500); 
      $("#imgOvalChild").removeAttr("style"); 

     } 

    </script>

感谢，迈克尔

来源

2011-06-10 MdeVera

你到底想达到什么目的？我怀疑你可以用这种方式删除整个“样式”属性，因为它很特殊。 – Pointy 2011-06-10 20:19:55

我只想让图片在您点击图片后保持显示。 – MdeVera 2011-06-10 20:28:41

您可以在单击事件上解除悬停。这样做可以防止鼠标移动事件，图像将保留在视图中。

$('#imgOvalSibling').click(function() { 
    $('#divOvalSibling').unbind('mouseenter mouseleave'); 
});

演示：http://jsfiddle.net/wdm954/YG6pq/1/

来源

2011-06-10 21:36:16 wdm

@wdm ....非常感谢你！非常好的演示！ – MdeVera 2011-06-13 14:52:42

$("#imgOvalSibling").attr("style","");

也是其更好地绑定的事件，而不是使用内联javascript

$("#imgOvalChild").click(function() { respond1(); });

如果你想显示一个元素与显示：无;你可以：

$("#imgOvalSibling").show();

来源

2011-06-10 20:35:24 braindamage

我用绑定实现了你的建议，并尝试$（“＃imgOvalSibling”）。attr（“style”，“”）;但图像不会保持可见。 – MdeVera 2011-06-10 20:49:28

看来，问题是，当你不徘徊在#divOvalSibling或#divOvalChild元素，图像获取隐藏。您可以删除样式，但在此之后，事件处理函数会启动并在图像上设置display：none。

快速解决将是有你的响应函数设置在图像上的一些数据：

function respond0() { 
    var startX = $("#imgOvalSibling").offset().left + 15; 
    var startY = $("#imgOvalSibling").offset().top + 7; 

    $("#respond0").drawLine(startX, startY, 850, 250); 
    /* You set the flag on the image */ 
    $("#imgOvalSibling").data("isShown", true) 
}

你修改你的悬停事件处理程序隐藏图像之前检查标志：

$(document).ready(function() { 
    $('#divOvalSibling').hover(
    function() {$('#imgOvalSibling').show();}, 
    function() { 
     if (!$('#imgOvalSibling').data("isShown")) { 
      $('#imgOvalSibling').hide(); 
     } 
    }) 
})

来源

2011-06-10 21:30:20 skajfes

使用removeAttr不适用于我

回答

相关问题