2

2 つのボタンがあります。1 つは (さまざまなサイズの) div を 10 倍大きくし、もう 1 つは 10 倍小さくします。ボタンを 2 回クリックして小さくすると、div はゼロに丸められます。大きくなるボタンを何回クリックしても、ゼロの値を乗算しているため、大きくなりません。これを修正する標準的な方法は何ですか? 私のアプリケーションでは、一部の div が他の div よりもはるかに大きいため、これが必要です。そのため、1 つの div は幅が 1 ピクセル未満になりますが (当然ながら非表示になります)、他の部分は数千ピクセルの幅になります。

更新: 私の div は、実際には惑星の直径を表す円です。私はこれらが正確である必要があります！小さいボタンを 5 回クリックすると、大きいボタンを 5 回クリックして、最初の正確な直径に戻すことができます。

また、div を無限に小さくしたり大きくしたりする必要はおそらくないでしょう。それに制限をかける標準的な方法は何ですか？私が達成しようとしていることの例については、私の jsfiddle を参照してください。http://jsfiddle.net/dfjosh/vtxeD/12/

HTML

<a href="javascript:;" class="smaller">smaller</a>
<a href="javascript:;" class="larger">larger</a>
<div></div>

CSS

div {
    width: 50px;
    height: 50px;
    background: cornflowerblue;
}

JavaScript

$('a').click(function() {
    if($(this).hasClass('smaller')) {
        var element = $('div');
        element.animate({
            'width' : element.width() * 0.1,
            'height' : element.height() * 0.1
        });
    } else if($(this).hasClass('larger')) {
        var element = $('div');
        element.animate({
            'width' : element.width() * 10,
            'height' : element.height() * 10
        });
    }
});
4

7 に答える 7

6

それが0'falsey' (または false-ish) として評価される場合、||演算子を使用してorが返す1イベントを渡すことができます:width()height()0

var element = $('div');
element.animate({
    'width' : (element.width() || 1) * 10,
    'height' : (element.height() || 1) * 10
});

JS フィドルのデモ。

于 2013-10-09T21:34:16.647 に答える
2

問題は、divがゼロになることではなく、再びそこから離れることだと私には思えます。

それは簡単にできます:

'width' : (element.width() * 10) || 1

仕組み: をelement.width()返す場合0、もちろん0 * 10も0です。0は誤った値であるため、代わりに||を使用し1ます。

または、必要に応じて:

'width' : (element.width() || 1) * 10

...これは、より迅速に開始されます。:-)

詳細: JavaScript の不思議なほど強力な OR 演算子 ( ||)

于 2013-10-09T21:34:07.843 に答える
1

div を小さくするときに幅が 1 を下回ったかどうかを確認するだけです。比率を維持したい場合は、高さの制限も追加してください。

ここに別のソリューションを追加しています。

また、浮動小数点数を使用して正確な戻り値を取得することはできません: 0.1. 10 進数を使用しているため、ブラウザーでは丸めの扱いが異なります。たとえば、IE は JS で計算された浮動小数点数に対して CSS で 2 桁の精度のみを使用します。他のブラウザーは小数点以下 3 桁を使用しますが、結果をそのまま使用するか変更するかを決定します。

自分でハードコードされた固定範囲を決定する場合に最適です。または、新しく計算された幅と高さを覚えておいて、戻ったときにそれらを適用します。これには、小さい方用と大きい方用の 2 つの配列を作成する必要があると思います。それ以外の場合は、キャンバスまたは svg に切り替えます。

于 2013-10-09T21:47:55.020 に答える
0

次のように、まだ妥当な境界線にあるかどうかを確認してください。

'width' : ( element.width() > 0.1 ? element.width() * 0.1 : element.width() )
'height' : ( element.height() > 0.1 ? element.height() * 0.1 : element.height() )

このようにして、実際には非常に小さくなります。しかし、どのディスプレイが 0.25 のサイズのピクセルを表示できるかを自問する必要があります。少なくとも、Apple の Retina ディスプレイは 0.5 ピクセルを表示できると想定できます。

于 2013-10-09T21:53:45.377 に答える
0

jsFiddle Demo

0 にならないようにする 1 つの方法は、高さと幅を調整し、0 を確認してから、0 になった場合はキャッシュされた値に再調整することです。

var w = element.width();
element.width(w*0.1);
var testWidth = element.width();
element.width(w);

if(testWidth == 0)return;

var h = element.height();
element.height(h*0.1);
var testHeight = element.height();
element.height(h);

if(testHeight == 0)return;
于 2013-10-09T21:59:09.547 に答える
0

さて、結局のところ、私は自分自身の質問に答えるつもりです。私が受けたすべての助けに感謝します。皆さんからの回答が見つからなかった理由は、質問を正しく表現しておらず、詳細を十分に説明していなかったためだと確信しています。とにかく、これは私の問題の解決策です：

私はもともとCSSですべてのdivを1000倍に縮小していました。つまり、(拡大すると) 4879.4 ピクセル幅になるはずの div に、CSS で値 4 を割り当てました。すぐに有効数字が 4 桁減りました。私がやったのは、実際の（100％スケール）値をjavascript変数に保存することでした。そうすれば、スケーリングするときに、すべての有効桁数を含む完全な値が使用されます。好きなだけ上下にスケーリングできます。そして、幅 4 ピクセルの div を 10 分の 1 に縮小すると、当然のことながら消えますが、拡大するとすぐに元に戻ります。

繰り返しますが、私は質問をするという悪い仕事をしました。しかし、この回答が、これについて疑問に思っている他の人の助けになることを願っています。

于 2013-10-10T05:14:26.783 に答える