Jquery改变css和表单数据

Jquery changing css and form data

本文关键字：表单 数据 css 改变 Jquery      更新时间：2023-09-26

我正在制作一个表单，用户在其中填写一个标题，他们可以放大或缩小。我有一个预览窗口，改变当他们点击"大小按钮"。但是我想将其存储在一个隐藏的形式中，以便在发布时获得值。

HTML - FORM 

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

HTML - PREVIEW WINDOW

<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
});

任何想法?

尝试使用.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;
        });
    });
});
<<p> 小提琴演示/strong>

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

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

好吧，我不太确定问题出在哪里，但这里有一种方法:

如果你想要一个大小范围，这样你就不会得到太大或太小的标题，你可以(虽然这是冗长的)为每个大小创建一个css类。

那么，您可以使用JqueryUI的.addClass()和.removeClass。有了这些，你可以这样做:
$("#sizeupbutton").click(function(e){
$(#title).removeClass("size45");
$(#title).addClass("size50");
});

如果我把你的问题完全搞错了，很抱歉，但是祝你好运!编辑:好的，现在我想我明白你想要什么了，我建议你看看下面Vucko的答案。

你可以得到这样的变量:

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

例子:小提琴

相关文章：