Question

我正在调用在on click方法上编写的函数。我想知道是否也可以在另一个onChange方法中调用该函数的一部分。

还是有其他解决方法？

我的功能：

const filts = flatten => {
 let new_filts = {
'site': $('#sites select option:selected')[0].value,,
'group_by': $('#group_by select option:selected')[0].value,
'date': 'date',
'topics': $('#topics select option:selected')[0].value,
'errors': []
 }


if (new_filts.site.length === 0)
    new_filts.errors.push('Please select at least one <b>Site</b>.');


 if (new_filts.errors.length > 0) {
   let message = '';
   new_filts.errors.forEach(d => {
   message += `<li>${d}</li>`
  });

 $.confirm({
  title: 'All filts Are Required',
});
}


 if (flatten) {
  new_filts.site = new_filts.site.join('|');
 }
   return new_filters;
  }

我的on click方法需要完整的功能，就像下面这样：

$('#update').on('click', function() {
   filters = filts(true);
});

update是一个按钮。我希望它调用所有filts函数。检查错误和全部。

我在onChange上有另一个site方法。我希望再次在此处调用filts函数，但我只希望能够调用函数的这一部分：

const filts = flatten => {
 let new_filts = {
'site': 'google',
'group_by': $('#group_by select option:selected')[0].value,
'date': 'date',
'topics': $('#topics select option:selected')[0].value,
'errors': []
 }

 if (flatten) {
  new_filts.site = new_filts.site.join('|');
 }
   return new_filters;
  }

我的onchange函数：

$('#site').on('change', function() {
   filters = filts(true);
});

我不想在onchange中调用函数的错误检查。

有什么办法吗？

Answer 1

您可以再传递一个参数，该参数说明您要检查错误还是不这样

    const filts = flatten, checkError => {
       let new_filts = {
       'site': $('#sites select option:selected')[0].value,,
       'group_by': $('#group_by select option:selected')[0].value,
       'date': 'date',
       'topics': $('#topics select option:selected')[0].value,
       'errors': []
    }

if(checkError){
  if (new_filts.site.length === 0)
    new_filts.errors.push('Please select at least one <b>Site</b>.');


 if (new_filts.errors.length > 0) {
   let message = '';
   new_filts.errors.forEach(d => {
      message += `<li>${d}</li>`
   });

  $.confirm({
    title: 'All filts Are Required',
  });
 }
}

 if (flatten) {
  new_filts.site = new_filts.site.join('|');
 }
   return new_filters;
  }

然后在两个不同的位置（例如

）调用您的方法

filts(true,true);

检查错误

filts(true,false);

不检查错误

Answer 2

为什么不只向filts函数添加另一个参数以停止执行该函数中的其他指令？

$('#update').on('click', function() {
   filters = filts(true, true);
});

$('#site').on('change', function() {
   filters = filts(true, false);
});

const filts = (flatten, shouldContinue) => {
 let new_filts = {
'site': $('#sites select option:selected')[0].value,,
'group_by': $('#group_by select option:selected')[0].value,
'date': 'date',
'topics': $('#topics select option:selected')[0].value,
'errors': []
 }

if (!shouldContinue) return;

if (new_filts.site.length === 0)
    new_filts.errors.push('Please select at least one <b>Site</b>.');


 if (new_filts.errors.length > 0) {
   let message = '';
   new_filts.errors.forEach(d => {
   message += `<li>${d}</li>`
  });

 $.confirm({
  title: 'All filts Are Required',
});
}

Answer 3

您可以将公用部分包装在其自己的函数中，然后在事件处理程序中调用它：

//the common part between the onclick handler and the onchange handler
function commonFunc(flatten) {
  let new_filts = {
  'site': 'google',
  'group_by': $('#group_by select option:selected')[0].value,
  'date': 'date',
  'topics': $('#topics select option:selected')[0].value,
  'errors': []
  }

  if (flatten) {
    new_filts.site = new_filts.site.join('|');
  }
  return new_filts;
}


//the filts function (onclick handler)
const filts = flatten => {

  //call the commonFunc to get value of new_filts
  let new_filts = commonFunc(flatten);

  //do extra stuff with new_filts
  
  if (new_filts.site.length === 0)
      new_filts.errors.push('Please select at least one <b>Site</b>.');


  if (new_filts.errors.length > 0) {
    let message = '';
    new_filts.errors.forEach(d => {
    message += `<li>${d}</li>`
   });

  $.confirm({
    title: 'All filts Are Required',
  });
}



  
  
$('#site').on('change', function() {
   filters = commonFunc(true);
});


$('#update').on('click', function() {
   filters = filts(true);
});

Answer 4

如果您可以在文档中使用全局变量，那就可以了。

var globalEventCheck = false; // global variable

$('#update').on('click change', function(e) {
  globalEventCheck = (e.type == 'click') ? true : false;
  filters = filts(true);
});

const filts = flatten => {
  let new_filts = {
    'site': $('#sites select option:selected')[0].value,,
    'group_by': $('#group_by select option:selected')[0].value,
    'date': 'date',
    'topics': $('#topics select option:selected')[0].value,
    'errors': []
  }
  if (globalEventCheck) { // new condition
   if (new_filts.site.length === 0) {
     new_filts.errors.push('Please select at least one <b>Site</b>.');
   }
   if (new_filts.errors.length > 0) {
     let message = '';
     new_filts.errors.forEach(d => {
     message += `<li>${d}</li>`
   });

    $.confirm({
      title: 'All filts Are Required',
    });
  } // new condition end

  if (flatten) {
     new_filts.site = new_filts.site.join('|');
  }
  return new_filters;
}

Answer 5

很简单，您可以在不传递参数的情况下执行此操作，也可以为进一步的逻辑传递参数。

const filts = () => {

    //console.log(event.data.flatten); get your param value

    let new_filts = {
        'site': $('#sites select option:selected')[0].value,
        'group_by': $('#group_by select option:selected')[0].value,
        'date': 'date',
        'topics': $('#topics select option:selected')[0].value,
        'errors': []
    };

    if (event.type == 'click') {

        if (new_filts.site.length === 0)
            new_filts.errors.push('Please select at least one <b>Site</b>.');

        if (new_filts.errors.length > 0) {
            let message = '';
            new_filts.errors.forEach(d => {
                message += `<li>${d}</li>`
            });

            $.confirm({
                title: 'All filts Are Required',
            });
        }

    }

    if (flatten) {
        new_filts.site = new_filts.site.join('|');
    }

    return new_filters;

}

$('#site').click({ flatten: 'customValue1' }, filts);
$('#update').change({ flatten: 'customValue2' }, filts)

有什么办法可以调用部分函数

5 个答案: