использование removeAttr не работает для меня

Question

У меня есть изображение, которое появляется после того, как вы наведите курсор мыши. Когда я нажимаю на изображение, я хочу, чтобы изображение оставалось нетронутым, используя метод removeAttr Но использование removeAttr, похоже, не работает для меня .... спасибо за любые предложения.

Вот мой HTML MARKUP

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

Спасибо, Michael

Answer 1

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

также лучше связывать события вместо использования встроенного JavaScript

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

если вы хотите показать элемент с дисплеем: нет; Вы можете просто:

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

Answer 2

Вы можете отменить привязку к событию клика.Это предотвратит событие mouseleave, и изображение останется в поле зрения.

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

Демонстрация: http://jsfiddle.net/wdm954/YG6pq/1/

Answer 3

Кажется, что проблема в том, что когда вы не наводите курсор на элементы #divOvalSibling или #divOvalChild, изображение становится скрытым.Вы можете удалить стиль, но после этого включается обработчик событий и устанавливает отображение: нет на изображении.

Быстрым решением было бы, чтобы ваши функции ответа установили некоторые данные на изображении:

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