2

2 つのテキスト入力を使用してカスタム ディメンションを設定したい div があります。

<div id="theFrame"></div>
    width: <input id="custWidth" type="text">
    height: <input id="custHeight" type="text">
<br>
<button id="custSet">Set my width!</button>

高さと幅を変数で設定してみましたが、どうしようか迷っています。

var frame = $('div#theFrame');

$("#custWidth")
    .keyup(function () {
        var custWidth = $(this).attr('value');
    })
    .keyup();

$("#custHeight")
    .keyup(function () {
        var custHeight = $(this).attr('value');
    })
    .keyup();

$('#custSet')
    .click( function() {
        frame.css({height: custHeight, width: custWidth});
    });

ありがとう。

http://jsfiddle.net/Kyle_Sevenoaks/6MUuv/

4

5 に答える 5

5 
var frame = $('div#theFrame');
var custWidth;
var custHeight;
$("#custWidth").keyup(function () {
      custWidth = $(this).attr('value');
    }).keyup();

$("#custHeight").keyup(function () {
      custHeight = $(this).attr('value');
    }).keyup();

$('#custSet').click( function() {
    frame.css({height: custHeight, width: custWidth});
});

変数のスコープがオフになっています。

于 2012-09-13T08:48:52.893 に答える
3

外部スコープで変数を宣言します。

var frame = $('div#theFrame');
var custWidth = 40;  // declared outside and assigned a default value
var custHeight = 40; // declared outside and assigned a default value

$("#custWidth").keyup(function () {
      custWidth = $(this).attr('value');
    }).keyup();

$("#custHeight").keyup(function () {
     custHeight = $(this).attr('value');
    }).keyup();

$('#custSet').click( function() {
    //frame.height(custHeight); // Alternative to .css() if you like, also doesn't need 'px' as it always is in pixels.
    //frame.width(custWidth);  // Alternative to .css() if you like, also doesn't need 'px' as it always is in pixels.
    frame.css({height: custHeight, width: custWidth});
});

デモ

于 2012-09-13T08:48:51.713 に答える
3

あなたの問題は、幅と高さの変数がスコープされていることです。それらをイベントハンドラーの外側で定義してから、それらのvar前に設定せずにそれらを設定する必要があります。

于 2012-09-13T08:47:56.403 に答える
2

CSS を設定するときは、おそらく「px」を含める必要があります。

frame.css({height: custHeight + 'px', width: custWidth + 'px'});

また、custHeight パラメーターと custWidth パラメーターはキーアップ関数でのみローカルであるため、グローバルに定義する必要があります。

var frame = $('div#theFrame'), custWidth = 0, custHeight = 0;

$("#custWidth")
    .keyup(function () {
        window.custWidth = $(this).attr('value');
    })
    .keyup();

そして...そこに 2 番目の keyup() 呼び出しは必要ないと思います:

$("#custWidth")
    .keyup(function () {
        window.custWidth = $(this).attr('value');
    });
于 2012-09-13T08:47:55.880 に答える
1

2つの変数をグローバルcustWidth、custHeightにするだけです

var frame = $('div#theFrame');
var custWidth,custHeight ;
$("#custWidth").keyup(function () {
      custWidth = $(this).attr('value');
}).keyup();

$("#custHeight").keyup(function () {
      custHeight = $(this).attr('value');
}).keyup();

$('#custSet').click( function() {
    frame.css({height: custHeight, width: custWidth});
});
于 2012-09-13T08:49:55.857 に答える