0

jQuery初心者です。
Googleで調べまくったのですが、やり方が見当たらず…。皆さん教えて下さい。

既に、CSSでwidthを100pxで設定している要素に対して、
jQueryを使って「"#btn"をクリックすると"#box"の幅が20pxずつ縮小する」
という指示は出来ないものでしょうか。

$("#btn").on("click",function(){
  $("#box").css('width', '-20px');
});

では出来ませんでした。(そらそうなんですが、最適なやり方が思いつかず…)
実現したいこととしては、boxの右側から20pxずつ削れていって、
5回クリックすると0pxになるようにしたいのです。

ご協力をお願いしますm(_ _ )m

1 件の回答 1

1

widthメソッドを呼び出す方法があります。

$("#btn").on("click",function(){
    $("#box").width("-=20");
});

または、width内に関数を指定する方法があります。

$("#btn").on("click",function(){
    $("#box").width(function(i, w) { return w - 20; });
});

なお、HTMLページロード時にclickイベントの定義を読み込む場合は、

<script>
$(function(){
    //ここにコード
});
</script>

内にコードを記述してください。
https://learn.jquery.com/using-jquery-core/document-ready/

Ref: https://forum.jquery.com/topic/use-width-to-decrease-width-of-element

3
  • うまく動作しました!ありがとうございます。
    – yu_ko
    Commented 2019年10月20日 0:22
  • すみません。追加で聞かせてくださいm(_ _ )m ①#boxのwidthが50pxになると#boxの"background-color"を赤色に、②20pxになると"background-color"をオレンジ色に、③最後、0pxになった際に画像("./img/finish.jpg")が現れる。としたい場合は、jQueryの追加記述をどのようにすれば宜しいでしょうか? *おそらく、if文になると思いますが…。
    – yu_ko
    Commented 2019年10月20日 7:01
  • 新しい質問を作成してください。
    – user22473
    Commented 2019年10月20日 10:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。