我有这个星级表单，希望您开始在文本区域键入，它会立即显示星级表单，但如果文本区域为空，它会隐藏起来。
我发现了以下代码：
<HTML>
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
<JS>
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
如何将此代码组合到我的代码中？因为现在只有当我点击文本区域外，然后显示星星时，它才会这样做。请给我建议！
@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
input.star {
display: none;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: 'f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: 'f006';
font-family: FontAwesome;
}
.rev-box {
height: 0;
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review" onchange="asd(this)"></textarea>
</div>
<div id="rateYo" style="visibility: hidden;"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
<script>
function asd(txt) {
var something = txt.value;
var star = document.getElementById("rateYo");
star.style.visibility = "visible";
}
$(function MyFunction() {
$("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
rating = Math.ceil(rating);
$('#rating_input').val(rating); //setting up rating value to hidden field
var bod = document.getElementById("review").value;
window.location.href = 'mailto:your@gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
});
});
</script>
</body>
</html>我已经自由地重写了您的代码，以完成您想要做的事情。
我想给你两个提示：
-
将数据层与表示层解耦。您将CSS样式混合在样式表、HTML和JavaScript中。您的HTML属性中也有JavaScript作为字符串。这很快就会让人困惑！自从HTML4和90年代以来，我们已经走了很长的路！
-
如果你使用一个库，那么就使用它。例如，你正在使用jQuery，那么就应该使用它，而不是直接向HTML属性添加事件处理程序；jQuery有
$(element).on(event, handler)，不要做<div onclick="something(this)"></div>。
$(function MyFunction() {
const textInput = $("#review").on('input', function () {
if (textInput.val().length) {
rateStar.show();
} else {
rateStar.hide();
}
});
const ratingInput = $('#rating_input');
const rateStar = $("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
let inputValue = textInput.val();
ratingInput.val(Math.ceil(rating)); //setting up rating value to hidden field
console.log( rating, inputValue );
// window.location.href = 'mailto:your@gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
}).hide();
});@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: 'f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: 'f006';
font-family: FontAwesome;
}
.rev-box {
/* height: 0; */
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review"></textarea>
</div>
<div id="rateYo"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
</body>
</html>