Javascript równoważny php do wydajności pętli

Question

pierwszy raz, więc przepraszam, jeśli tęsknię za czymś oczywistym tutaj.

Co próbuję zrobić jest całkiem proste ... w php. Mogę to zrobić we śnie. Jednak moja strona wymaga integracji javascript, której jeszcze nie znam.

Mam pytanie dotyczące części roboczej skryptu, którą chciałbym uczynić bardziej wydajną.

Pytanie: Mam serię pól wyboru, które użytkownik "sprawdzi", jeśli coś zrobił. JavaScript działa dobrze, ale muszę użyć pętli, więc mój mózg nie boli ze wszystkich niepotrzebnych linii kodu.

Oto nieporęczne brzydkie rzeczy:

$("#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"); 
}); 

I tu jedna wersja tego, co próbowałem w moich godzinach tracić czasu, aby to wydajny:

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"); 
    }); 
} 

Niestety, tutaj jest 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> 

Nie wiem, dlaczego to nie działa, ale jestem pewien, że sędziowie uderzają czoło w tym, jak łatwo to jest. Próbowałem wielu rozwiązań znalezionych tutaj i gdzie indziej, ale nigdy nie jestem w stanie z powodzeniem dostosować przykładów do mojego kodu. Dziękuję bardzo za Twoją pomoc!!!

Answer 1

Dlaczego nie można po prostu użyć wspólną klasę i używać ciąg konkatenacji, aby uzyskać drugi element.

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

I w zależności od swojej struktury HTML, tak naprawdę nawet nie trzeba JavaScript, aby zmienić tekst elementu związanego z wyboru.

.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

Możesz dodać klasę CSS do elementu i użyć selektora klasy zamiast selektora identyfikatora. Wtedy nawet nie potrzebujesz pętli.

jQuery nie jestem specem, ale myślałem, że trzeba użyć $(this).checked zamiast this.checked

Answer 3

Dlaczego nie używasz klasę CSS dla elementów zamiast identyfikatora? Można zrobić coś takiego:

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

można przeczytać o tym tutaj: http://www.learningjquery.com/2007/08/what-is-this