[英]changing the image size according to the value of the select box
我有一個選擇框,其中包含寬度X高度格式之類的選項。 在選擇寬度和高度時,我必須將下面的圖像(在div“ other”中)調整為該尺寸。 我嘗試了以下代碼:
<script src="http://test/sites/js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.target').change(function() {
$value=document.getElementById('target').value;
var myArray = $value.split('X');
document.getElementById('other').innerHTML = '<img src="http://test/sites/all/themes/artsy/images/images2.jpeg" width="myArray[0]" height="myArray[1]">';
});
});
</script>
<form>
<select class="target" id="target">
<option value="20 X 30" selected="selected">20 X 30</option>
<option value="100 X 150">100 X 150</option>
</select>
</form>
<div id="other">
<?php echo $value; ?> <img src="http://test/sites/all/themes/artsy/images/images2.jpeg">
</div>
我已經修改了您的JavaScript代碼
$(document).ready(function() {
$('.target').change(function() {
$value=document.getElementById('target').value;
var myArray = $value.split('X');
document.getElementById('other').innerHTML = '
<img src="http://test/sites/all/themes/artsy/images/images2.jpeg" width="'+myArray[0]+'px" height="'+myArray[1]+'px ">';
});
});
看起來不錯。 除了您沒有聲明任何像素並且您不正確地引用javascript變量這一事實外,沒有什么可說的。 您需要將width和height屬性更改為以下內容->
width="'+myArray[0]+'px"
height="'+myArray[1]+'px"
那應該做。
稍微修改一下您現有的代碼,嘗試使用jQuery的“ .attr”函數:
$('.target').change(function() {
$value=document.getElementById('target').value;
var myArray = $value.split('X');
$('#other').attr("width",myArray[0]);
$('#other').attr("height",myArray[1]);
<script>
$(document).ready(function() {
$('.target').change(function() {
var pVal = $('#target').val();
var myArray = pVal.split(' X '); // Note the extra spacing.
$('#other').html('<img src="http://test/sites/all/themes/artsy/images/images2.jpeg" width="'+myArray[0]+'" height="'+myArray[0]+'">');
});
});
</script>
Of course, you'll find it easier to do the actual update like this:
$('#other img').attr('width',myArray[0]).attr('height',myArray[1]);
HTML
<select name="something" id="resoultion">
<option value="100_200">100 X 200</option>
<option value="200_400">200 X 400</option>
<option value="300_600">300 X 600</option>
</select>
<img src="img.jpg" id="imageID" alt="" />
jQuery的
$('#resoultion').change(function() {
var resolution = $(this).val().split('_');
var width = resolution[0];
var height = resolution[1];
$('#imageID').css({
width: width,
height: height
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.