jquery, если кнопка нажата, сделайте это еще что-нибудь еще

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

быть ammended к

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

обернуть если (isClicked) в функции, как выше, и вызвать функцию, когда отправка формы или независимо от того, что вы делаете. Поскольку условие if проверяется только на windowLoad один раз, вам необходимо привязать проверку ont события, скажем, при отправке формы, вы проверяете, щелкнули ли вы, а затем переходите к остальному. Но вы должны стрелять условие проверки с экс события:

$('#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

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>