Question

我用鼠标悬停后会显示一张图片。当我点击图像时，我希望使用removAttr方法保持图像完好无损。但是使用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>

谢谢，迈克尔

Answer 1

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

最好绑定事件而不是使用内联javascript

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

如果你想用display：none显示一个元素;你可以：

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

Answer 2

似乎问题在于，当您没有将鼠标悬停在#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();
        }
    })
})

Answer 3

您可以在点击事件上取消绑定悬停。这样做会阻止mouseleave事件，图像将保持在视图中。

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

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

使用removeAttr对我不起作用

3 个答案: