$(this).removeCss([]);
时间: 2024-03-02 10:50:43 浏览: 19
`$(this).removeCss([])` 并不是 jQuery 中的一个标准方法。如果需要删除元素的 CSS 样式,可以使用 `$(this).css()` 方法来设置对应的样式属性为空字符串或者 null 或 undefined。例如:
```javascript
$(this).css({
"background-color": "",
"border": ""
});
```
这将会将元素的背景色和边框样式都删除。需要注意的是,这种方法只能删除元素的内联样式,如果元素的样式是通过外部 CSS 文件或者内部样式表设置的,则需要修改对应的 CSS 文件或者样式表。
相关问题
var $dragImg = $('#dragImg'); var $box = $('#box'); $dragImg.on('dragstart', function(e) { e.originalEvent.dataTransfer.setData('text', e.target.id); }); $box.on('dragover', function(e) { e.preventDefault(); }); $box.on('drop', function(e) { e.preventDefault(); var data = e.originalEvent.dataTransfer.getData('text'); var $draggedImg = $('#' + data); $box.append($draggedImg); });补全代码使图片可拖拽可脱出
下面是完整的代码,实现了图片可拖拽、可脱出的功能:
HTML 代码:
```
<div id="box"></div>
<img id="dragImg" src="image.jpg" alt="image">
```
CSS 代码:
```
#box {
width: 300px;
height: 300px;
border: 2px dashed #ccc;
margin: 20px;
padding: 20px;
}
#dragImg {
width: 100px;
height: 100px;
margin: 10px;
cursor: move;
}
```
jQuery 代码:
```
var $dragImg = $('#dragImg');
var $box = $('#box');
$dragImg.on('dragstart', function(e) {
e.originalEvent.dataTransfer.setData('text', e.target.id);
});
$box.on('dragover', function(e) {
e.preventDefault();
});
$box.on('drop', function(e) {
e.preventDefault();
var data = e.originalEvent.dataTransfer.getData('text');
var $draggedImg = $('#' + data);
$box.append($draggedImg);
});
$dragImg.on('dragend', function(e) {
var $draggedImg = $(this);
var $parent = $draggedImg.parent();
if ($parent.attr('id') === 'box') {
$draggedImg.remove();
}
});
```
在上述代码中,我们添加了一个 `dragend` 事件监听器,当拖拽操作结束时,`dragend` 事件会被触发。在事件处理函数中,我们首先使用 `$()` 函数获取被拖拽元素的引用,然后使用 `$().parent()` 方法获取到被拖拽元素的父级元素。如果父级元素是目标元素 `$box`,则使用 `$().remove()` 方法将被拖拽元素从 DOM 树中删除。
这样,我们就实现了图片可拖拽、可脱出的功能。
$(document).on("keydown", (e) => { if (e.ctrlKey) { switch (e.keyCode){ case 38: wrapper.children().each(function () { $(this).css("background-color", "rgb(" + getRandomChanel() + ", " + getRandomChanel() + ", " + getRandomChanel() + ")") }); break; case 82: case 71: case 66: wrapper.children().each(function () { let colors = ($(this).css("background-color")).match(/[0-9]{1,3}/g); let r = parseInt(colors[0]); let g = parseInt(colors[1]); let b = parseInt(colors[2]); if(e.keyCode === 82 && r > g && r > b){ $(this).remove(); }else if(e.keyCode === 71 && g > r && g > b){ $(this).remove(); }else if(e.keyCode === 66 && b > r && b > g){ $(this).remove(); } }); break; } console.log(e); return false; } });换种方式编写
可以使用普通的键盘事件监听器来替代jQuery的on()方法,也可以使用switch语句中的if-else语句来替代switch语句。另外,可以使用arrow function来替代普通的函数声明。下面是一种可能的替代方式:
```javascript
document.addEventListener("keydown", (e) => {
if (e.ctrlKey) {
if (e.keyCode === 38) {
wrapper.children().each(function () {
$(this).css("background-color", "rgb(" + getRandomChanel() + ", " + getRandomChanel() + ", " + getRandomChanel() + ")");
});
e.preventDefault();
} else if (e.keyCode === 82 || e.keyCode === 71 || e.keyCode === 66) {
wrapper.children().each(function () {
let colors = ($(this).css("background-color")).match(/[0-9]{1,3}/g);
let r = parseInt(colors[0]);
let g = parseInt(colors[1]);
let b = parseInt(colors[2]);
if ((e.keyCode === 82 && r > g && r > b) ||
(e.keyCode === 71 && g > r && g > b) ||
(e.keyCode === 66 && b > r && b > g)) {
$(this).remove();
}
});
e.preventDefault();
}
}
});
```
这个替代方式中,我们使用了addEventListener()方法来替代jQuery的on()方法。我们还使用了if-else语句来替代switch语句,这样能够更加清晰地表达代码逻辑。同时,我们使用了e.preventDefault()来阻止默认行为,这样可以避免在处理键盘事件时出现问题。