JS为第n个实例运行相同的函数

Question

我正在尝试让function为每个.item1和.item2运行，等等独立运行。我如何为页面上的任何nth个实例运行该函数？

$("#edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);

function editStatus() {
  $("#edit-toggle").on("change", function() {
    $(this).toggleClass("new");
    toggleStatus();
  });
}

function toggleStatus() {
  if ($("#edit-toggle").is(":checked")) {
    $(".edit :input").attr("disabled", true);
  } else {
    $('.edit :input').each(function() {
      if ($(this).val() == '' && $(this).prop('required')) {
        $(this).parent().find('.indicator').addClass('animate');
      }
    });
    $(".edit :input").removeAttr("disabled");
  }
}

$(".edit :input").on('keyup', function() {
  var $this = $(this);
  var $indicator = $('.indicator', $this.parent());
  if ($this.val() == '' && $this.prop('required')) {
    $indicator.addClass('animate');
  } else {
    $indicator.removeClass('animate');
  }
});

.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
  <label class="edit-icon" for=edit-toggle>
  <input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
    <div class="indicator"></div>
  </div>
</div>
<div class="item2">
  <label class="edit-icon" for=edit-toggle>
  <input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
    <div class="indicator"></div>
  </div>
</div>

Answer 1

您应该使用class而非id作为转发器元素，并使用$(this).parent().next()查找下一个元素。

如果您不知道输入的位置，可以使用data-input并将相关的id设置为data属性以获取此元素

$(".edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);

$('.edit-toggle').on('change', function () {
  var idInput = $(this).data('input');
  var inputEle = $('#' + idInput);
  var indicator = inputEle.next();
  if ($(this).is(":checked")) {
    inputEle.attr("disabled", true);
  } else {
    if (inputEle.val() == '' && inputEle.prop('required')) {
       indicator.addClass('animate');
    } else {
      indicator.removeClass('animate');
    }

    inputEle.removeAttr("disabled");
  }
});

$(".edit :input").on('keyup', function() {
  var $this = $(this);
  var $indicator = $('.indicator', $this.parent());
  if ($this.val() == '' && $this.prop('required')) {
    $indicator.addClass('animate');
  } else {
    $indicator.removeClass('animate');
  }
});

.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
  <label class="edit-icon" for="edit-toggle1">
  <input id="edit-toggle1" data-input="input-text-1" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input" id="input-text-1" type="text" name="name" autocomplete="off" value="Text 1" required/>
    <div class="indicator"></div>
  </div>
</div>
<div class="item2">
  <label class="edit-icon" for="edit-toggle2">
  <input id="edit-toggle2" data-input="input-text-2" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input" id="input-text-2" type="text" name="name" autocomplete="off" value="Text 1" required/>
    <div class="indicator"></div>
  </div>
</div>

或者您可以使用.get(ntn)

$(".edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);

$('.edit-toggle').get().forEach(function(ele, i) {
  $(ele).on('change', function () {
  var inputEle = $($('.edit-input').get(i));
  var indicator = inputEle.next();
  if ($(this).is(":checked")) {
    inputEle.attr("disabled", true);
  } else {
    if (inputEle.val() == '' && inputEle.prop('required')) {
       indicator.addClass('animate');
    } else {
      indicator.removeClass('animate');
    }

    inputEle.removeAttr("disabled");
  }
})
});

$(".edit :input").on('keyup', function() {
  var $this = $(this);
  var $indicator = $('.indicator', $this.parent());
  if ($this.val() == '' && $this.prop('required')) {
    $indicator.addClass('animate');
  } else {
    $indicator.removeClass('animate');
  }
});

.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
  <label class="edit-icon" for="edit-toggle1">
  <input id="edit-toggle1" data-input="input-text-1" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input" id="input-text-1" type="text" name="name" autocomplete="off" value="Text 1" required/>
    <div class="indicator"></div>
  </div>
</div>
<div class="item2">
  <label class="edit-icon" for="edit-toggle2">
  <input id="edit-toggle2" data-input="input-text-2" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input" id="input-text-2" type="text" name="name" autocomplete="off" value="Text 1" required/>
    <div class="indicator"></div>
  </div>
</div>