Javascript 如何在为表单输入分别使用$（this）和$时编写干代码

我已经编写了一些代码来启用和禁用一系列表单上的输入和选择字段。我已经重复了很多代码，我想知道如何以一种干练、可伸缩的方式编写这些代码

我创建了一个小提琴，它重复了三次——编辑、取消和保存

$(edit).each(function(){

$(this).on('click', function(){ }); });

这是我的小提琴

---

我会继续努力，但如果有人有任何指针或类似的小提琴，请让我知道。谢谢。

您可以将表单/按钮操作放在一个单独的函数中，这样可以减少隐藏/显示/禁用等操作的重复：

function setFormMode($form, mode){
    switch(mode){
        case 'view':
            $form.find('.save-button, .cancel-button').hide();
            $form.find('.edit-button').show();
            $form.find("input, select").prop("disabled", true);
            break;
        case 'edit':
            $form.find('.save-button, .cancel-button').show();
            $form.find('.edit-button').hide();
            $form.find("input, select").prop("disabled", false);
            break;
    }
}

创建三个“onclick”函数（因为您可能还想做其他事情）：

然后绑定：

$('.save-button').on('click', save_onclick);
$('.cancel-button').on('click', cancel_onclick);
$('.edit-button').on('click', edit_onclick);

---

小提琴：

您还可以做如下操作。它不使用jQuery，但演示了另一种方法，可以添加或删除名为hidden的类来隐藏或显示按钮。它还使用事件委派来减少侦听器的数量

.hidden {
  display: none;
}

以下是主要函数，如果使用toggle类函数，它会更简洁

/* If click is from element with class edit-button, hide it and show
 * buttons with class cancel-button or save-button.
 * If click is from element with class cancel-button or save-button,
 * hide them and show button with class edit-button
 */

function toggleButtons(event) {
  var form = this;
  var target = event.target;

  // If the click came from a button with class edit-button, hide it and
  // show the cancel and save buttons, otherwise show the edit button and
  // hide the cancel and show buttons
  if (hasClass(target, ['cancel-button','save-button','edit-button'])) {
    var buttons = form.querySelectorAll('.cancel-button, .save-button, .edit-button');
    Array.prototype.forEach.call(buttons, function(el) {
      if (hasClass(el, 'hidden')) {
        removeClass(el, 'hidden');
      } else {
        addClass(el, 'hidden');
      }
    });
  }
}

不要向每个元素添加侦听器，只需向每个表单添加一个侦听器即可：

window.onload = function() {
  for (var forms=document.forms, i=0, iLen=forms.length; i<iLen; i++) {

    // Add listener to each form
    forms[i].addEventListener('click', toggleButtons, false);

    // Hide the cancel and save buttons
    Array.prototype.forEach.call(forms[i].querySelectorAll('.cancel-button, .save-button'),
                                 function(el){addClass(el, 'hidden')}
    );
  }
}

---

您应该将代码简化为演示问题的最小示例，然后在此处发布代码。有很多更有效的方法来做你想做的事情，例如，每个表单控件都有一个表单属性来引用它所在的表单，因此如果你使用按钮作为按钮（而不是断开的链接），那么

$（this）。最接近的（“表单”）

就是

this.form

。如果按钮的名称类似于saveButton，那么

$（section）.find（save）.show（）

就是

$（this.form.saveButton）.show（）

.Seamus，这正是我想要的响应。非常感谢你。通过创建切换模式，可以消除代码中的大量重复。通过这个例子，我将继续成为一名更好的程序员。再次感谢。谢谢罗布。这也是对我问题的一个很好的回答。这两个答案都帮助我学会了编写更高效的代码，我真的很感激。

window.onload = function() {
  for (var forms=document.forms, i=0, iLen=forms.length; i<iLen; i++) {

    // Add listener to each form
    forms[i].addEventListener('click', toggleButtons, false);

    // Hide the cancel and save buttons
    Array.prototype.forEach.call(forms[i].querySelectorAll('.cancel-button, .save-button'),
                                 function(el){addClass(el, 'hidden')}
    );
  }
}

// Return true if el has class className
// If className is an array, return true if el has any class in className
function hasClass(el, className) {
  if (typeof className == 'string') {
    className = [className];
  }
  var re = new RegExp('(^|\\s+)(' + className.join('|') + ')(\\s+|$)');
  return re.test(el.className);
}

// Add class className to el
function addClass(el, className) {
  var classes;  

  if (!hasClass(el, className)) {
    classes = el.className.match(/\S+/g) || [];
    classes.push(className);
    el.className = classes.join(' ');
  }
}

// Remove class className from el
function removeClass(el, className) {
  var re;
  if (hasClass(el, className)) {
    var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)','g');
    classes = el.className.replace(re, ' ').match(/\S+/g);
    el.className = classes.join(' ');
  }
}