javascript - Jquery更改css和表单数据

Question

我正在制作一个表格，用户填写一个可以放大或缩小的标题。我有一个预览窗口，当他们单击“放大按钮”时会发生变化。但我想以隐藏的形式存储它，以便在发布时获得价值。

HTML - 表格

<input id="title" name="title" />
<input id="titlesize" name="titlesize" value="50" />
<div id="sizeUp">Size up!</div>

HTML - 预览窗口

<h2 id="titlepreview" style="font-size: 50px;">Title</h2>

Javascript

$(document).ready(function() {
$("#sizeUp").click(function() {
        $("#titlepreview").css("font-size","+=5"),
        $("#titlesize").val("+=5");   // <-- Here's the problem
});

有任何想法吗？

Answer 1

使用.val( function(index, value) )试试这个：

$(document).ready(function () {
    $("#sizeUp").click(function () {
        $("#titlepreview").css("font-size", "+=5"),
        $("#titlesize").val(function (index, value) {
            return parseInt(value, 10) + 5;
        });
    });
});

小提琴演示

Answer 2

你可以得到这样的变量：

$(document).ready(function () {
$("#sizeUp").click(function () {
    $("#titlepreview").css("font-size", "+=5");
    var up=parseInt(($("#titlepreview").css("font-size")),10);
    $("#titlesize").val(up);
 });
});

例子：小提琴

Answer 3

好的，我不完全确定问题出在哪里，但无论如何，这是一种解决方法：

如果你想要一个尺寸范围，这样你就不能得到一个太大或太小的标题，你可以（虽然这是冗长的）为每个尺寸制作一个 css 类。

然后，您可以使用JqueryUI和. 有了这些，您可以执行以下操作：.addClass().removeClass
$("#sizeupbutton").click(function(e){
$(#title).removeClass("size45");
$(#title).addClass("size50");
});

对不起，如果我完全把你的问题弄错了，但祝你好运！

编辑：好的，现在我想我明白你想要什么了，我建议你在下面查看 Vucko 的答案。

Answer 4

您需要 parseInt 将字符串作为数字处理。

$("#sizeUp").click(function () {   
 var obj = $("#titlesize");
 var value = parseInt(obj.val());
 obj.val(value + 5);
});