图像预览和按钮

Question

我在html文件中使用jQuery，可以在单击表单字段时更改图像。我在这里有一个有效的例子：

http://calculator.metaalboutique.nl/plantenbak_hout.php

当用户单击表单字段时，将显示相应的图像。到目前为止一直很好，但是当点击一个按钮时，没有显示新的图像。如何让它与按钮一起使用？

我的jQuery文件

// input focus
$( form ).on( 'focus click', 'input', function () {
    // set preview
    setPreview( $( this ).data( 'preview' ) );
} );

// input focus out
$( form ).on( 'focusout', 'input', function () {
    setPreview();
} );

function setPreview( id ) {
    images.removeClass( 'active' );
    var target = $( '#' + id );
    if ( target.length ) {
    $( '#' + id ).addClass( 'active' );
    } else {
    // set default preview if no target
    $( '#preview_default' ).addClass( 'active' );
    }
}

HTML部分：

<!-- width right -->
<div id="div_widthRight" class="form-group has-warning">
<label for="widthRight" class="col-sm-3 control-label">Breedte rechts</label>
<div class="col-sm-9">
    <div class="input-group">
    <input type="number" class="form-control" id="widthRight" name="width_right" min="20" max="252" value="" data-preview="preview_hl_right" onkeyup="validate()" onclick="validate()">
    <span class="input-group-addon">cm</span>
    </div>
</div>
</div>

<!-- height -->
<div id="div_height" class="form-group has-warning">
<label for="height" class="col-sm-3 control-label">Hoogte</label>
<div class="col-sm-9">
    <div class="btn-group input-group-btn">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onkeyup="height_button(this);validate()" onclick="height_button(this);validate()" style="border:1px solid #000000;">14,5</button>
        <button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onkeyup="height_button(this);validate()" onclick="height_button(this);validate()" style="border:1px solid #000000;">29,0</button>
        <button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onkeyup="height_button(this);validate()" onclick="height_button(this);validate()" style="border:1px solid #000000;">43,5</button>
        <button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onkeyup="height_button(this);validate()" onclick="height_button(this);validate()" style="border:1px solid #000000;">58,0</button>
    </span>
    <span class="input-group-addon">cm</span>
    </div>
</div>
</div>

<!-- images -->
<div class="panel panel-default">
    <div id="preview">
    <img src="./assets/images/wood_basis.png" id="preview_default" class="active" />
    <img src="./assets/images/wood_highlight-front.png" id="preview_hl_front" />
    <img src="./assets/images/wood_highlight-back.png" id="preview_hl_back" />
    <img src="./assets/images/wood_highlight-left.png" id="preview_hl_left" />
    <img src="./assets/images/wood_highlight-right.png" id="preview_hl_right" />
    <img src="./assets/images/wood_highlight-height.png" id="preview_hl_height" />
    </div>
</div>
<!-- end images -->

Answer 1

从按钮中删除-javaagent:<path to spring-agent-${spring.version}.jar>和onkeyup属性，并将其添加到脚本中：

onclick