Question

我正在尝试单击某个按钮时更改图像的高度和宽度。到目前为止，我已经掌握了基础知识，但是我认为我没有正确的基础知识。图像和其他文本正在移动，但是图像大小没有变化。现在主要是图像周围的空白区域在改变。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>

  //image
  function shrinkImage() {
    $('#dog_image').height(200);
    $('#dog_image').width(307);
  }

  </script>
</head>

<div id="dog_image">
<img src="dog.jpg" alt="turle">
</div>

<div id="image_buttons">
  <button type="button" id="shrink" onclick="shrinkImage();">Shrink Image</button>
</div>

Answer 1

这是一个很好的方法：

$('.pictureclass').click(function (e) {
    if ($(e.target).hasClass('expanded')) {
        $(".pictureclass").removeClass('expanded').stop().animate({
            width: 300,
            height: 300
        }, 300);
    } else {
        $(".pictureclass").addClass('expanded').stop().animate({
            width: $(e.target).attr("width"),
            height: $(e.target).attr("height")
        }, 200);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="mrbean" class="pictureclass" src="http://2.bp.blogspot.com/-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" />

Answer 2

这不是你想要的吗？

Started POST "/occasions" for 127.0.0.1 at 2018-10-14 06:38:41 -0700
Processing by OccasionsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"XQ7RkDMBG/U+FECZcZ4A3eTmNgXVdAswbgIBdAErRNKTB4v/7YbOTpqkeG28RghhVZd5I+PUjG04EGTUF8o5jw==", "occasion"=>{"name"=>"Test", "date"=>"2018-10-01", "notes"=>"", "person_ids"=>["", "22", "24", "25"]}, "commit"=>"Create Occasion"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ /Users/lizbayardelle/.rvm/gems/ruby-2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
  Person Load (0.2ms)  SELECT "people".* FROM "people" WHERE "people"."id" IN (?, ?, ?)  [["id", 22], ["id", 24], ["id", 25]]
  ↳ app/controllers/occasions_controller.rb:30
   (0.1ms)  begin transaction
  ↳ app/controllers/occasions_controller.rb:34
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/occasions_controller.rb:34
  CACHE User Load (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/occasions_controller.rb:34
  CACHE User Load (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/occasions_controller.rb:34
  CACHE User Load (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/occasions_controller.rb:34
  Occasion Create (0.5ms)  INSERT INTO "occasions" ("user_id", "name", "date", "notes", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?, ?)  [["user_id", 1], ["name", "Test"], ["date", "2018-10-01"], ["notes", ""], ["created_at", "2018-10-14 13:38:41.063659"], ["updated_at", "2018-10-14 13:38:41.063659"]]
  ↳ app/controllers/occasions_controller.rb:34
  Occasion::HABTM_People Create (0.2ms)  INSERT INTO "occasions_people" ("occasion_id", "person_id") VALUES (?, ?)  [["occasion_id", 2], ["person_id", 22]]
  ↳ app/controllers/occasions_controller.rb:34
  Occasion::HABTM_People Create (0.1ms)  INSERT INTO "occasions_people" ("occasion_id", "person_id") VALUES (?, ?)  [["occasion_id", 2], ["person_id", 24]]
  ↳ app/controllers/occasions_controller.rb:34
  Occasion::HABTM_People Create (0.1ms)  INSERT INTO "occasions_people" ("occasion_id", "person_id") VALUES (?, ?)  [["occasion_id", 2], ["person_id", 25]]
  ↳ app/controllers/occasions_controller.rb:34
   (1.2ms)  commit transaction
  ↳ app/controllers/occasions_controller.rb:34
Redirected to http://localhost:3000/occasions
Completed 302 Found in 20ms (ActiveRecord: 3.0ms)

const electron = require('electron')) 
const dialog = electron.remote.dialog 
const fs = require('fs') 
const $ = require('jquery') 
const xlsx = require('node-xlsx')s[0])

$('#button').on('click', function(){
    dialog.showOpenDialog((fileNames) => {
        var obj = xlsx.parse(fileNames[0])
        $.each(obj[0].data, function(a,v){
          console.log(v[1])
        })   
    }) 
})

图像高度现在通过jQuery更改

2 个答案: