-1
我發現這個引導腳本允許用戶輸入評論。Javascript-jquery不顯示以表格形式傳遞的值
Issue：我想顯示評論+姓名，我得到undefined以供評論，我如何顯示用戶選擇的星星？
也有一種方法來保存評論和名稱，所以它會顯示所有的時間後點擊提交按鈕。 （如果沒有一個數據庫）
這裏是我的代碼
(function(e) {
var t, o = {
className: "autosizejs",
append: "",
callback: !1,
resizeDelay: 10
},
i = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
n = ["fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing", "textTransform", "wordSpacing", "textIndent"],
s = e(i).data("autosize", !0)[0];
s.style.lineHeight = "99px", "99px" === e(s).css("lineHeight") && n.push("lineHeight"), s.style.lineHeight = "", e.fn.autosize = function(i) {
return this.length ? (i = e.extend({}, o, i || {}), s.parentNode !== document.body && e(document.body).append(s), this.each(function() {
function o() {
var t, o;
"getComputedStyle" in window ? (t = window.getComputedStyle(u, null), o = u.getBoundingClientRect().width, e.each(["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"], function(e, i) {
o -= parseInt(t[i], 10)
}), s.style.width = o + "px") : s.style.width = Math.max(p.width(), 0) + "px"
}
function a() {
var a = {};
if (t = u, s.className = i.className, d = parseInt(p.css("maxHeight"), 10), e.each(n, function(e, t) {
a[t] = p.css(t)
}), e(s).css(a), o(), window.chrome) {
var r = u.style.width;
u.style.width = "0px", u.offsetWidth, u.style.width = r
}
}
function r() {
var e, n;
t !== u ? a() : o(), s.value = u.value + i.append, s.style.overflowY = u.style.overflowY, n = parseInt(u.style.height, 10), s.scrollTop = 0, s.scrollTop = 9e4, e = s.scrollTop, d && e > d ? (u.style.overflowY = "scroll", e = d) : (u.style.overflowY = "hidden", c > e && (e = c)), e += w, n !== e && (u.style.height = e + "px", f && i.callback.call(u, u))
}
function l() {
clearTimeout(h), h = setTimeout(function() {
var e = p.width();
e !== g && (g = e, r())
}, parseInt(i.resizeDelay, 10))
}
var d, c, h, u = this,
p = e(u),
w = 0,
f = e.isFunction(i.callback),
z = {
height: u.style.height,
overflow: u.style.overflow,
overflowY: u.style.overflowY,
wordWrap: u.style.wordWrap,
resize: u.style.resize
},
g = p.width();
p.data("autosize") || (p.data("autosize", !0), ("border-box" === p.css("box-sizing") || "border-box" === p.css("-moz-box-sizing") || "border-box" === p.css("-webkit-box-sizing")) && (w = p.outerHeight() - p.height()), c = Math.max(parseInt(p.css("minHeight"), 10) - w || 0, p.height()), p.css({
overflow: "hidden",
overflowY: "hidden",
wordWrap: "break-word",
resize: "none" === p.css("resize") || "vertical" === p.css("resize") ? "none" : "horizontal"
}), "onpropertychange" in u ? "oninput" in u ? p.on("input.autosize keyup.autosize", r) : p.on("propertychange.autosize", function() {
"value" === event.propertyName && r()
}) : p.on("input.autosize", r), i.resizeDelay !== !1 && e(window).on("resize.autosize", l), p.on("autosize.resize", r), p.on("autosize.resizeIncludeStyle", function() {
t = null, r()
}), p.on("autosize.destroy", function() {
t = null, clearTimeout(h), e(window).off("resize", l), p.off("autosize").off(".autosize").css(z).removeData("autosize")
}), r())
})) : this
}
})(window.jQuery || window.$);
var __slice = [].slice;
(function(e, t) {
var n;
n = function() {
function t(t, n) {
var r, i, s, o = this;
this.options = e.extend({}, this.defaults, n);
this.$el = t;
s = this.defaults;
for (r in s) {
i = s[r];
if (this.$el.data(r) != null) {
this.options[r] = this.$el.data(r)
}
}
this.createStars();
this.syncRating();
this.$el.on("mouseover.starrr", "span", function(e) {
return o.syncRating(o.$el.find("span").index(e.currentTarget) + 1)
});
this.$el.on("mouseout.starrr", function() {
return o.syncRating()
});
this.$el.on("click.starrr", "span", function(e) {
return o.setRating(o.$el.find("span").index(e.currentTarget) + 1)
});
this.$el.on("starrr:change", this.options.change)
}
t.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, t) {}
};
t.prototype.createStars = function() {
var e, t, n;
n = [];
for (e = 1, t = this.options.numStars; 1 <= t ? e <= t : e >= t; 1 <= t ? e++ : e--) {
n.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"))
}
return n
};
t.prototype.setRating = function(e) {
if (this.options.rating === e) {
e = void 0
}
this.options.rating = e;
this.syncRating();
return this.$el.trigger("starrr:change", e)
};
t.prototype.syncRating = function(e) {
var t, n, r, i;
e || (e = this.options.rating);
if (e) {
for (t = n = 0, i = e - 1; 0 <= i ? n <= i : n >= i; t = 0 <= i ? ++n : --n) {
this.$el.find("span").eq(t).removeClass("glyphicon-star-empty").addClass("glyphicon-star")
}
}
if (e && e < 5) {
for (t = r = e; e <= 4 ? r <= 4 : r >= 4; t = e <= 4 ? ++r : --r) {
this.$el.find("span").eq(t).removeClass("glyphicon-star").addClass("glyphicon-star-empty")
}
}
if (!e) {
return this.$el.find("span").removeClass("glyphicon-star").addClass("glyphicon-star-empty")
}
};
return t
}();
return e.fn.extend({
starrr: function() {
var t, r;
r = arguments[0], t = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var i;
i = e(this).data("star-rating");
if (!i) {
e(this).data("star-rating", i = new n(e(this), r))
}
if (typeof r === "string") {
return i[r].apply(i, t)
}
})
}
})
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr()
})
$(function() {
$('#new-review').autosize({
append: "\n"
});
var reviewBox = $('#post-review-box');
var newReview = $('#new-review');
var openReviewBtn = $('#open-review-box');
var closeReviewBtn = $('#close-review-box');
var ratingsField = $('#ratings-hidden');
openReviewBtn.click(function(e) {
reviewBox.slideDown(400, function() {
$('#new-review').trigger('autosize.resize');
newReview.focus();
});
openReviewBtn.fadeOut(100);
closeReviewBtn.show();
});
closeReviewBtn.click(function(e) {
e.preventDefault();
reviewBox.slideUp(300, function() {
newReview.focus();
openReviewBtn.fadeIn(200);
});
closeReviewBtn.hide();
});
$('.starrr').on('starrr:change', function(e, value) {
ratingsField.val(value);
});
});
$(document).ready(function() {
$("#form").validate({
rules: {
firstname: "required",
comment: "required",
},
messages: {
firstname: "Please enter your first name",
comment: "Please enter your Comment",
}
});
$('#form').submit(function() {
if ($('#form').valid()) {
var str = '';
str += $('#firstname').val() + '<br />';
str += $('#comment').val() + '<br />';
$('.display').append(str);
}
return false;
});
});.animated {
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
transition: height 0.2s;
}
.stars {
margin: 20px 0;
font-size: 24px;
color: #d17581;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<div class="container">
<div class="row" style="margin-top:40px;">
<div class="col-md-6">
<div class="well well-sm">
<div class="text-right">
<a class="btn btn-success btn-green" href="#reviews-anchor" id="open-review-box">Leave a Review</a>
</div>
<div class="row" id="post-review-box" style="display:none;">
<div class="col-md-12">
<form id="form" accept-charset="UTF-8" action="" method="post">
<input type="text" class="form-control animated" name="firstname" id="firstname" type="hidden" placeholder="Enter your Name">
<br>
<input id="ratings-hidden" name="rating" type="hidden">
<textarea class="form-control animated" cols="50" id="new-review" name="comment" placeholder="Enter your review here..." rows="5"></textarea>
<div class="text-right">
<div class="stars starrr" data-rating="0"></div>
<a class="btn btn-danger btn-sm" href="#" id="close-review-box" style="display:none; margin-right: 10px;">
<span class="glyphicon glyphicon-remove"></span>Cancel</a>
<button class="btn btn-success btn-lg" type="submit">Save</button>
</div>
</form>
<div class="display"></div>
</div>
</div>
</div>
</div>
</div>
</div>您可以點擊這裏here
當你正在從'STR + = $（ '＃註釋'）VAL）值（+ '
';'，但是好像'#COMMENT '這個ID在你的表格中不可用有'id =「new-review」'應該是'id =「comment」' –