Javascript相當於php的循環效率

Question

第一次發佈，所以我很抱歉，如果我錯過了這裏明顯的東西。

我想要做的是很簡單....在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 whizzes在拍你的額頭在這是多麼容易。我嘗試了在這裏和其他地方找到的多種解決方案，但從來沒有能夠成功地將示例適用於我的代碼。非常感謝你的幫助！！！

Answer 1

你爲什麼不只是使用一個公共類，並使用字符串連接來獲得第二個元素。

$(".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/>

Answer 2

您可以將CSS類添加到元素，並使用類選擇器而不是id選擇器。那麼你甚至不需要循環。

我沒有jQuery的高手，但是我以爲你會需要使用$(this).checked而非this.checked

Answer 3

爲什麼你不使用CSS類的元素，而不是ID？你可以這樣做：

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

你可以閱讀一下：http://www.learningjquery.com/2007/08/what-is-this