图像预览和按钮

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

拆下按键onkeyup和onclick属性并添加到这个脚本：

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