jquery如果按钮点击了执行其他操作执行其他操作

jquery if button clicked do this else do something else

本文关键字：执行 其他 操作 如果 按钮 jquery      更新时间：2023-09-26

嗨，我很难让它正常工作。

我用隔板上传一个用户标志。当他们编辑自己的详细信息时，如果他们不再次点击裁剪，图像将不会保存，并用损坏的版本覆盖现有文件。我想知道用户是否再次点击了裁剪，如果他们点击了，新的图像将被保存，如果不是现有的图像（从数据库拖动保存在表单提交上）

我有这个代码来裁剪图像

<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">');
})

当用户单击裁剪按钮（#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。我们非常感谢您的帮助。

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）包装在一个函数中，如上所述，并在提交表单或执行任何操作时调用该函数。因为如果条件只在windowLoad上检查过一次，你必须将检查绑定到一个事件上，比如在表单提交时，你检查是否点击了，然后继续执行其余操作。但你必须用一个事件触发检查条件，例如：

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

在加载时设置：

$('.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">');
});


 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;
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button id="btnCrop">Click Here</button>

相关文章：