Question

我已经制作了一个php表单，如果满足某些条件，我想显示一个加载gif。这是我需要在jquery中使用的逻辑的可读伪代码/示例。

if (file_input_is_set && submit_button_is_clicked) {
   <div class="progress-bar">tada...loading_gif</div> 
  }

我有这两个代码可以单独使用。 第一个代码显示设置文件输入时的加载gif。

jQuery().on('change', 'input[type="file"]', function(e) {

第二个代码显示单击表单提交按钮时的加载gif。

jQuery("input[name='profile_submit']").click(function (e) {

由于我几乎不了解jQuery，我需要帮助将这些事件放在一起。如果我的术语错了，请原谅我。这是我试过的不起作用，它甚至在我按下提交按钮之前显示加载gif。所以我需要一个像php &&运算符一样工作的函数，我不知道你是如何在jquery中那样做的。

jQuery().on('change', 'input[type="file"]', function(e) {
    jQuery("input[name='profile_submit']").click(function (e) {
    //jQuery('#submit-button').hide();
    jQuery('.progress-bar').fadeIn(1000);
    });
    });

注意：你在代码中看到很多jQuery的原因是由于wordpress（使用表单），因为它需要它处于无冲突模式。

重新提问（来自@webkit的提示）：我如何同时检查是否 file_input_is_set /在提交事件时触发有效吗？

Answer 1

从最后一个操作开始，表单提交。然后检查文件输入中是否存在文件：

jQuery("input[name='profile_submit']").click(function (e) {
      if( jQuery('input[type="file"]').val() != '' ){
        jQuery('.progress-bar').fadeIn(1000);
      }
});

JSFiddle演示：http://jsfiddle.net/nDNP5/

Answer 2

你可以这样做：

jQuery("input[name='profile_submit']").click(function (e) {
    // check to see if file is valid
    if (jQuery('input[type="file"]').val() != "") {
        // load
        jQuery('.progress-bar').fadeIn(1000);
    }
});

或者:(只有在选择了文件时才会激活提交btn）

jQuery('input[type="file"]').on('change', function (e) {
    // check to see if file is valid
    if (jQuery('input[type="file"]').val() != "") {
        jQuery("input[name='profile_submit']").off().on('click', function () {
            jQuery('.progress-bar').fadeIn(1000);
        });
    } else {
        jQuery("input[name='profile_submit']").off()
    }
});

加入两个简单的jquery条件

2 个答案: