我有两个问题。
鼠标悬停在每个标签上应将该标签的颜色更改为黄色
我应该将随机数 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/