使用 removeAttr 对我不起作用答案

【问题标题】：using removeAttr does not work for me使用 removeAttr 对我不起作用
【发布时间】：2011-06-10 20:10:52
【问题描述】：

我有一张在您将鼠标悬停后显示的图像。当我单击图像时，我希望图像通过使用 removAttr 方法保持不变。但是使用 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>

谢谢，迈克尔

【问题讨论】：

你想达到什么目的？我有点怀疑你可以这样删除整个“样式”属性，因为它有点特别。
我只想让图片一直显示，尤其是在您点击图片后。

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

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

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

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

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

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

【讨论】：

我通过绑定实现了您的建议并尝试了 $("#imgOvalSibling").attr("style","");但图像不会保持可见。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：