Question

我有一个php文件，它与<img>的PHP文件中的id="uploadedPhoto"元素相呼应。上传后我有一个Jquery脚本，可以在按钮点击时更改图像的大小。在此之前，当我使用img作为div的背景时它正在工作但是现在它不起作用。

HTML代码。

<div class="mainArea" id="response"> 
    <div class="designer">
        <?php include"shirtBasic.svg" ?>
        <div id="imageDiv"> </div>
    </div>

<img>在id="imageDiv" 之间上传。

PHP代码。

if(normal_resize_image($image_res, $image_save_folder, $image_type, $max_image_size, $image_width, $image_height, $jpeg_quality)){

    echo '<div align="center">';        
    echo '<img id="uploadedPhoto" src="'. $new_file_name.'" alt="Resized Image">';
    echo '</div>';  
}

的JScript。

$('#large').click(function(){

        var height = document.getElementById('uploadedPhoto').clientHeight;
        var width = document.getElementById('uploadedPhoto').clientWidth;

        if (height > width) {
            $('#uploadedPhoto').css('height', '115%');
            $('#upoladedPhoto').css('width', '95%');    
        }
        else if (height < width) {
            $('#uploadedPhoto').css('height', '95%');
            $('#uploadedPhoto').css('width', '115%');
        }
        else {
            $('#uploadedPhoto').css('height', '115%');
            $('#uploadedPhoto').css('width', '115%');
        } 

    });

    $('#medium').click(function(){

        var height = document.getElementById('uploadedPhoto').clientHeight;
        var width = document.getElementById('uploadedPhoto').clientWidth;

        if (height > width) {
            $('#uploadedPhoto').css('height', '85%');
            $('#upoladedPhoto').css('width', '70%');    
        }
        else if (height < width) {
            $('#uploadedPhoto').css('height', '70%');
            $('#uploadedPhoto').css('width', '85%');
        }
        else {
            $('#uploadedPhoto').css('height', '85%');
            $('#uploadedPhoto').css('width', '85%');
        }   

    });

    $('#small').click(function(){

        var height = document.getElementById('uploadedPhoto').clientHeight;
        var width = document.getElementById('uploadedPhoto').clientWidth;

        if (height > width) {
            $('#uploadedPhoto').css('height', '65%');
            $('#upoladedPhoto').css('width', '50%');    
        }
        else if (height < width) {
            $('#uploadedPhoto').css('height', '50%');
            $('#uploadedPhoto').css('width', '65%');
        }
        else {
            $('#uploadedPhoto').css('height', '65%');
            $('#uploadedPhoto').css('width', '65%');
        }   
    });

    $('#originalSize').click(function(){

        var height = document.getElementById('uploadedPhoto').clientHeight;
        var width = document.getElementById('uploadedPhoto').clientWidth;

        $('#uploadedPhoto').css('height', height);
        $('#upoladedPhoto').css('width', width);                
    });

你能找到问题吗？

Answer 1

DOM结构存在问题。我想你的图像会自动使用div标签的大小

用于扩大或缩小尺寸。

所以我建议你试试，修复这个div的大小。

阿图尔

如何在Jquery中获取回显元素？

1 个答案: