jQuery 类名不起作用

Posted 2023-03-16

【中文标题】jQuery 类名不起作用

【英文标题】：jQuery className don't work

【发布时间】：2018-01-08 23:29:20

【问题描述】：

在这 2 个示例中，第一个示例不适用。

在第二个示例中，我将 bind dragover 和 dragleave 事件绑定到 img 而不是 div 但我想为 div 更改 className。 事件被正确检测到并且没有引发错误，但 div 不会更改其类。

问题出在哪里？

//This work

$(document).ready( function() 
    $("#framedrag").bind("dragover dragleave", function(e) 
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
        return false;
    );
);
   

//This don't work

$(document).ready( function() 
    $("#dragdrop").bind("dragover dragleave", function(e) 
        e.stopPropagation();
        e.preventDefault();
        $("#framedrag").className = (e.type == "dragover" ? "hover" : "");
        return false;
    );
);

#framedrag

  	color: #555;
  	border: 2px dashed #555;
  	border-radius: 7px;
  	cursor: default;


#framedrag.hover

  	color: #3fc600;
  	border-color: #3fc600;
  	border-style: solid;

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preview-pane">
    <div id="framedrag">
        <div class="preview-container">
            <img id="dragdrop" src="images/upload-picture.png" class="jcrop-preview" />
        </div>
    </div>
</div>

【问题讨论】：

jQuery dragenter or dragover to include children的可能重复

@Difster 我已经看到了这个答案，但没有帮助问题不一样

【参考方案1】：

试试这个$("#framedrag").attr("class", e.type == "dragover" ? "hover" : "");

【讨论】：

@user2272143 哦，当然，我不专心。为什么不用jQuery的简单addClass？

@user2272143 我已经为attr 编辑过，你也可以只使用$("#framedrag").removeClass().addClass(e.type == "dragover" ? "hover" : "");

对不起，我的错误。其实这行得通！ $("#framedrag")[0].className 非常感谢！