en utilisant removeAttr ne fonctionne pas pour moi

Question

J'ai une image qui est présentée après avoir survolé votre souris. Lorsque je clique sur l'image, je voudrais que l'image reste intacte en utilisant la méthode removAttr. Mais en utilisant removeAttr ne semble pas fonctionner pour moi .... merci pour toutes suggestions.

Voici mon Balise 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> 

Voici mon code 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> 

Merci, Michael

Answer 1

Vous pouvez dissocier le survol sur un événement de clic. Cela empêchera l'événement mouseleave et l'image restera visible.

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

Démo: http://jsfiddle.net/wdm954/YG6pq/1/

Answer 2

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

également de son mieux pour lier les événements au lieu d'utiliser inline javascript

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

si vous voulez afficher un élément avec affichage: none; vous pouvez juste:

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

Answer 3

Il semble que le problème est que lorsque vous n'êtes pas planant au-dessus des éléments de #divOvalSibling ou #divOvalChild que l'image est cachée. Vous pouvez supprimer le style, mais après cela, le gestionnaire d'événements intervient et définit display: none sur l'image.

fix rapide serait d'avoir vos fonctions Respond définirait des données sur l'image:

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) 
} 

Et vous modifiez votre gestionnaire d'événements de vol stationnaire pour vérifier le drapeau avant de se cacher l'image:

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