Question

嗨，我无法让它发挥作用。

我使用cropbox上传用户徽标。当他们编辑他们的细节时，如果他们不再点击裁剪，则不会保存图像并用损坏的版本覆盖现有文件。我希望能够知道用户是否再次点击裁剪，如果他们这样做了新图像将被保存，如果不是现有图像（从数据库中拖出保存在表单提交上）

我有这个代码来裁剪图像

<script type="text/javascript">
$(window).load(function() {
    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'exhibitorlist/%%GLOBAL_logo%%'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);

        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    $('#btnCrop').on('click', function(){
        var img = cropper.getDataURL();
        $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');
        $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});

这一位

$('#btnCrop').on('click', function(){
    var img = cropper.getDataURL();
    $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');
    $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">');
})

当用户点击croped按钮（#btnCrop）

时裁剪图像

如果用户没有点击我想要此代码的裁剪按钮

 $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');

被推荐

 $('.cropped').append('<input name="img" type="hidden" value="another url">');

我试过这个但是无法让它起作用

    var isClicked = false;
$('#btnCrop').click(function () {
isClicked = true;
});

if (isClicked) {

        $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');
        $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">'); 
}     else {
$('.cropped').append('<input name="img" type="hidden" value="%%GLOBAL_logo%%">');
}

我对jquery不是很好。任何帮助都非常感谢。

Answer 1

function checkIfClicked(){
if (isClicked) {

        $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');
        $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">'); 
}     else {
$('.cropped').append('<input name="img" type="hidden" value="%%GLOBAL_logo%%">');
}
}

将if（isClicked）包装在函数中，如上所述，并在提交表单或正在执行的任何操作时调用函数。因为if条件只在windowLoad上检查一次，所以你必须绑定一个事件的检查，比如表单提交，你检查是否点击，然后继续。但是你必须用事件ex：

激活检查条件

$('#form1').submit(function(e){
 e.preventDefault();
checkifClicked();
});

Answer 2

将其设置为加载：

$('.cropped').append('<input name="img" type="hidden" value="%%GLOBAL_logo%%">');

$('#btnCrop').on("click", function () {
 $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');       
 $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">');
});

Answer 3

＆＃13;

 var isClicked = false;
 $('#btnCrop').click(function() {
   if (isClicked) {
     console.log("You have already clicked me.")
       //alert("You have already clicked me."); //
   } else {
     console.log("You are going to click me first time.")
       //alert("You are going to click me first time.");
   }
   isClicked = true;
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button id="btnCrop">Click Here</button>

＆＃13;

jquery如果单击按钮执行此操作则执行其他操作

3 个答案: