Javascript相当于php的循环效率


Javascript equivalent to php for loop efficiency

第一次发帖,所以如果我在这里错过了一些明显的东西,我深表歉意。

我想做的很简单....在 PHP 中。我可以在睡梦中做到这一点。但是,我的页面需要集成javascript,而我还没有特别熟练。

我有一个关于脚本工作部分的问题,我想提高效率。

问题:我有一系列复选框,用户将"检查"他们是否做了某事。Javascript工作得很好,但我需要使用一个循环,这样我的大脑就不会受到所有不必要的代码行的伤害。

这是笨重的丑陋东西:

$("#M1L1Box").click(function() {
  $("#M1L1BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});
$("#M1L2Box").click(function() {
  $("#M1L2BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});
$("#M1L3Box").click(function() {
  $("#M1L3BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});
$("#M1L4Box").click(function() {
  $("#M1L4BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});
$("#M1L5Box").click(function() {
  $("#M1L5BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});
$("#M1L6Box").click(function() {
  $("#M1L6BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});
$("#M1L7Box").click(function() {
  $("#M1L7BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});
$("#M1L8Box").click(function() {
  $("#M1L8BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

这是我在浪费时间的几个小时中尝试过的一个版本,以使其高效:

  for(i=1; i<=8; i++){
  var checkBoxCode = "#M1L" + i +"Box";
  var feedbackCode = "#M1L" + i + "BoxFeedback";
  $(checkBoxCode).click(function() {
    $(feedbackCode).text(this.checked ? "- completed" : "- mark as complete");
  });
}

对不起,这是 html:

<input type="checkbox" id="M1L1Box" class="checkbox1" value="M1L1">
<label for="M1L1Box" id="M1L1Label"> - Module 1 Lesson 1 <span id="M1L1BoxFeedback"></span></label><br>
<input type="checkbox" id="M1L2Box" class="checkbox1" value="M1L2">
<label for="M1L2Box" id="M1L2Label"> - Module 1 Lesson 2 <span id="M1L2BoxFeedback"></span></label><br>
<input type="checkbox" id="M1L3Box" class="checkbox1" value="M1L3">
<label for="M1L3Box" id="M1L3Label"> - Module 1 Lesson 3 <span id="M1L3BoxFeedback"></span></label><br>
<input type="checkbox" id="M1L4Box" class="checkbox1" value="M1L4">
<label for="M1L4Box" id="M1L4Label"> - Module 1 Lesson 4 <span id="M1L4BoxFeedback"></span></label><br>
<input type="checkbox" id="M1L5Box" class="checkbox1" value="M1L5">
<label for="M1L5Box" id="M1L5Label"> - Module 1 Lesson 5 <span id="M1L5BoxFeedback"></span></label><br>
<input type="checkbox" id="M1L6Box" class="checkbox1" value="M1L6">
<label for="M1L6Box" id="M1L6Label"> - Module 1 Lesson 6 <span id="M1L6BoxFeedback"></span></label><br>
<input type="checkbox" id="M1L7Box" class="checkbox1" value="M1L7">
<label for="M1L7Box" id="M1L7Label"> - Module 1 Lesson 7 <span id="M1L7BoxFeedback"></span></label><br>
<input type="checkbox" id="M1L8Box" class="checkbox1" value="M1L8">
<label for="M1L8Box" id="M1L8Label"> - Module 1 Lesson 8 <span id="M1L8BoxFeedback"></span></label><br>

不知道为什么这不起作用,但可以肯定的是,你们的 js 奇才正在拍打你的额头,因为这是多么容易。我已经尝试了在这里和其他地方找到的多种解决方案,但始终无法成功地将示例改编为我的代码。非常感谢您的帮助!!

为什么不直接使用一个公共类并使用字符串连接来获取第二个元素。

$(".item").on("change", function() {
  $("#" + this.id + "Feedback").text(this.checked ? "- completed" : "- mark as complete");
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="M1L1Box" class="item" />
<label id="M1L1BoxFeedback"></label>
<br/>
<input type="checkbox" id="M2L2Box" class="item" />
<label id="M2L2BoxFeedback"></label>
<br/>
<input type="checkbox" id="M3L3Box" class="item" />
<label id="M3L3BoxFeedback"></label>
<br/>

根据您的HTML结构,您甚至不需要JavaScript来更改链接到复选框的元素的文本。

.item + label span { display: none }
.item + label span + span { display: inline; }
.item:checked + label span { display: inline; }
.item:checked + label span + span { display: none; }
<input type="checkbox" id="M1L1Box" class="item" />
<label id="M1L1BoxFeedback"> - <span>completed</span><span>mark as complete</span></label>
<br/>
<input type="checkbox" id="M2L2Box" class="item" />
<label id="M2L2BoxFeedback"> - <span>completed</span><span>mark as complete</span></label>
<br/>
<input type="checkbox" id="M3L3Box" class="item" />
<label id="M3L3BoxFeedback"> - <span>completed</span><span>mark as complete</span></label>
<br/>

为什么不使用CSS类来表示元素而不是ID?您可以执行以下操作:

$(".feedbackBox").click(function() {
  $(this).text(this.checked ? "- completed" : "- mark as complete");
});

你可以在这里阅读它: http://www.learningjquery.com/2007/08/what-is-this

您可以向元素添加 CSS 类,并使用类选择器而不是 id 选择器。那么你甚至不需要循环。

我不是jQuery高手,但我认为你需要使用$(this).checked而不是this.checked