- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有两个问题。
鼠标悬停在每个标签上应将该标签的颜色更改为黄色
我应该将随机数 append 到 - Slucajan broj -(随机数是“broj”)。问题是:随机数应该比其余的大,并且颜色为红色。
我尝试过的一切,在我看来 JS 在 replaceWith
行之后不接受任何东西。没有错误,但我不知道我的错误在哪里。
这是代码:
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title> Jquery</title>
</head>
<body>
<style>
.obojeno= {
color: red;
size: 1.55em
}
</style>
<input type="text" name="prvi" id="prvi" value="Tag"></input>
<button type="button" id="ponisti" name="ponistavanje">Poništi</button>
<div class="prikazati"><br></div>
<hr>
<form id="unesi" action="#">
<input type="number" id="min" placeholder="min"></input>
<input type="number" id="max" placeholder="max"></input>
<button type="button" id="generisanje" name="generisi">Generiši</button>
<p id="slu"><b>Slucajan broj </b></p>
</form>
<script>
$('#slu').append('<b>[0-10]:</b>');
var brojac = 1;
var kopirati = $(`<div class="prikazati"></div>`);
$('#prvi').on('input', function(e) {
if (e.target.value === ' ') {
kopirati.clone().insertAfter('#ponisti').append('Tag' + brojac);
$('#prvi').val('');
brojac += 1;
}
});
$(document).on('click', '.prikazati', function() {
$(this).remove();
});
$('#ponisti').click(function() {
$('.prikazati').html('<br>');
brojac = 1;
});
$('#generisanje').click(function() {
var don = Number(document.getElementById('min').value);
var gor = Number(document.getElementById('max').value);
var broj;
broj = (Math.round(Math.random() * (gor - don + 1)) + don);
// $('#slu').replaceWith('<br> <br> Slucajan broj','['+ don + ' - ' + gor + ']: ');
$('#slu').each(function() {
var elemSlu = $(this);
elemSlu.replaceWith('<br> <br> Slucajan broj', '[' + don + ' - ' + gor + ']: ');
$('#slu').append(broj);
});
});
</script>
</body>
</html>
最佳答案
首先,
elemSlu.replaceWith('<br> <br> Slucajan broj', '[' + don + ' - ' + gor + ']: ');
它取代了你的 <p id="slu">
与 <br><br>...
.那么下次当您尝试替换内容时,选择器 $('#slu')
找不到任何东西,将被忽略。
我认为你应该使用 elemSlu.html()
相反:
elemSlu.html('<br> <br> Slucajan broj [' + don + ' - ' + gor + ']: ');
还有你的风格.obojeno
必须应用于 append 的 broj
.这样的事情会起作用:
$('#slu').append(`<span class="obojeno">${broj}</span>`);
和风格.obojeno
应该是这样的:
.obojeno {
color: red;
font-size: 1.55em;
}
和也与“标签”有关。我不确定你指的是哪个标签?..尽管无论如何你可以使用 css 选择器 hover
给它们设置样式。如果“标签”是您的文本输入(值为“标签”),则 css 可能如下所示:
input[type='text']:hover {
background-color: yellow
}
编辑 由于您的评论,标签的样式将如下所示:
.prikazati:hover {
background: yellow;
}
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title> Jquery</title>
</head>
<body>
<style>
.obojeno {
color: red;
font-size: 1.55em;
}
input[type='text']:hover {
background-color: yellow
}
.prikazati:hover {
background: yellow;
}
</style>
<input type="text" name="prvi" id="prvi" value="Tag">
<button type="button" id="ponisti" name="ponistavanje">Poništi</button>
<div class="prikazati"><br></div>
<hr>
<form id="unesi" action="#">
<input type="number" id="min" placeholder="min">
<input type="number" id="max" placeholder="max">
<button type="button" id="generisanje" name="generisi">Generiši</button>
<p id="slu"><b>Slucajan broj </b></p>
</form>
<script>
$('#slu').append('<b>[0-10]:</b>');
var brojac = 1;
var kopirati = $(`<div class="prikazati"></div>`);
$('#prvi').on('input', function(e) {
if (e.target.value === ' ') {
kopirati.clone().insertAfter('#ponisti').append('Tag' + brojac);
$('#prvi').val('');
brojac += 1;
}
});
$(document).on('click', '.prikazati', function() {
$(this).remove();
});
$('#ponisti').click(function() {
$('.prikazati').html('<br>');
brojac = 1;
});
$('#generisanje').click(function() {
var don = Number(document.getElementById('min').value);
var gor = Number(document.getElementById('max').value);
var broj;
broj = (Math.round(Math.random() * (gor - don + 1)) + don);
// $('#slu').replaceWith('<br> <br> Slucajan broj','['+ don + ' - ' + gor + ']: ');
$('#slu').each(function() {
var elemSlu = $(this);
elemSlu.html('<br> <br> Slucajan broj [' + don + ' - ' + gor + ']: ');
$('#slu').append(`<span class="obojeno">${broj}</span>`);
});
});
</script>
</body>
</html>
关于javascript - 如何 append 和更改 append 数字的属性(在 css 中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58203025/
你能比较一下属性吗 我想禁用文本框“txtName”。有两种方式 使用javascript,txtName.disabled = true 使用 ASP.NET, 哪种方法更好,为什么? 最佳答案 我
Count 属性 返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
CompareMode 属性 设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
Column 属性 只读属性,返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
AvailableSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive 
Attributes 属性 设置或返回文件或文件夹的属性。可读写或只读(与属性有关)。 object.Attributes [= newattributes] 参数 object
AtEndOfStream 属性 如果文件指针位于 TextStream 文件末,则返回 True;否则如果不为只读则返回 False。 object.A
AtEndOfLine 属性 TextStream 文件中,如果文件指针指向行末标记,就返回 True;否则如果不是只读则返回 False。 object.AtEn
RootFolder 属性 返回一个 Folder 对象,表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
Path 属性 返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。 说明 对于驱动器,路径不包含根目录。
ParentFolder 属性 返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。 说明 以下代码
Name 属性 设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
Line 属性 只读属性,返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。 说明 文件刚
Key 属性 在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary 
Item 属性 设置或返回 Dictionary 对象中指定的 key 对应的 item,或返回集合中基于指定的 key 的&
IsRootFolder 属性 如果指定的文件夹是根文件夹,返回 True;否则返回 False。 object.IsRootFolder object 应为&n
IsReady 属性 如果指定的驱动器就绪,返回 True;否则返回 False。 object.IsReady object 应为 Drive&nbs
FreeSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
FileSystem 属性 返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。 说明 可
Files 属性 返回由指定文件夹中所有 File 对象(包括隐藏文件和系统文件)组成的 Files 集合。 object.Files object&n
我是一名优秀的程序员,十分优秀!