如何「縮小」重複幾乎相同的JavaScript/jQuery線？

Question

我在javascript/jQuery編程方面很新，並且設法做了以下工作，但我確信有一種方法可以在幾行代碼中「縮小」它。我已經嘗試了每個。，但沒有成功。

這段代碼是做什麼的： 1）你有一些div中包含「標籤」。 2）您保存localStorage的自定義標題通過輸入 3）標題被更新

這裏是jsFiddle for this太

代碼：

<div id="theater-1" class="theater">theater 1</div> 
<div id="theater-2" class="theater">theater 2</div> 
<div id="theater-3" class="theater">theater 3</div> 
<div id="theater-4" class="theater">theater 4</div> 
<div id="theater-5" class="theater">theater 5</div> 



1 
<input type="text" id="theater_name_1" class="input-for-theater-title"> 
<button id="save-title-1">Save</button> 
<br> 2 
<input type="text" id="theater_name_2" class="input-for-theater-title"> 
<button id="save-title-2">Save</button> 
<br> 3 
<input type="text" id="theater_name_3" class="input-for-theater-title"> 
<button id="save-title-3">Save</button> 
<br> 4 
<input type="text" id="theater_name_4" class="input-for-theater-title"> 
<button id="save-title-4">Save</button> 
<br> 5 
<input type="text" id="theater_name_5" class="input-for-theater-title"> 
<button id="save-title-5">Save</button> 


<button id="clear">Clear</button> 

<script> 
    var theater_1_saved_name = localStorage.getItem("theater_1_name"); 
    var theater_2_saved_name = localStorage.getItem("theater_2_name"); 
    var theater_3_saved_name = localStorage.getItem("theater_3_name"); 
    var theater_4_saved_name = localStorage.getItem("theater_4_name"); 
    var theater_5_saved_name = localStorage.getItem("theater_5_name"); 

    if (theater_1_saved_name !== null) { 
     document.getElementById("theater-1").innerHTML = theater_1_saved_name; 
     document.getElementById("theater_name_1").value = theater_1_saved_name; 

    }; 
    if (theater_2_saved_name !== null) { 
     document.getElementById("theater-2").innerHTML = theater_2_saved_name; 
     document.getElementById("theater_name_2").value = theater_2_saved_name; 
    }; 
    if (theater_3_saved_name !== null) { 
     document.getElementById("theater-3").innerHTML = theater_3_saved_name; 
     document.getElementById("theater_name_3").value = theater_3_saved_name; 
    }; 
    if (theater_4_saved_name !== null) { 
     document.getElementById("theater-4").innerHTML = theater_4_saved_name; 
     document.getElementById("theater_name_4").value = theater_4_saved_name; 
    }; 
    if (theater_5_saved_name !== null) { 
     document.getElementById("theater-5").innerHTML = theater_5_saved_name; 
     document.getElementById("theater_name_5").value = theater_5_saved_name; 
    }; 


    $("#save-title-1").click(function() { 
     var title_of_1 = $('#theater_name_1').val(); 
     localStorage.setItem("theater_1_name", title_of_1); 
     $("#theater-1").text(title_of_1); 
    }); 
    $("#save-title-2").click(function() { 
     var title_of_2 = $('#theater_name_2').val(); 
     localStorage.setItem("theater_2_name", title_of_2); 
     $("#theater-2").text(title_of_2); 
    }); 
    $("#save-title-3").click(function() { 
     var title_of_3 = $('#theater_name_3').val(); 
     localStorage.setItem("theater_3_name", title_of_3); 
     $("#theater-3").text(title_of_3); 
    }); 
    $("#save-title-4").click(function() { 
     var title_of_4 = $('#theater_name_4').val(); 
     localStorage.setItem("theater_4_name", title_of_4); 
     $("#theater-4").text(title_of_4); 
    }); 

    $("#save-title-5").click(function() { 
     var title_of_5 = $('#theater_name_5').val(); 
     localStorage.setItem("theater_5_name", title_of_5); 
     $("#theater-5").text(title_of_5); 
    }); 
    $("#clear").click(function() { 
     localStorage.clear(); 
    }); 
</script> 

Answer 1

循環和字符串連接，尋找n在以下爲變化：

var n; 
for (n = 1; n <= 5; ++n) { 
    var theater_saved_name = localStorage.getItem("theater_" + n + "_name"); 
    if (theater_saved_name !== null) { 
     document.getElementById("theater-" + n).innerHTML = theater_saved_name; 
     document.getElementById("theater_name_" + n).value = theater_saved_name; 
    } 
    $("#save-title-" + n).click(function() { 
     var title = $('#theater_name_' + n).val(); 
     localStorage.setItem("theater_" + n + "_name", title); 
     $("#theater-" + n).text(title); 
    }); 
} 

變化只有您的JavaScript，而不是您的HTML或您存儲本地存儲的方式。你也可以改變這些，比如使用一個通用的類來獲取元素，並獲取你可以編入索引的相關元素的集合，但以上是僅限JavaScript的變化。

下面是一個例子，它可以改變你的HTML（你大部分都有公共類）和本地存儲;關鍵是index參數/變量：

On jsFiddle（堆棧片斷不支持本地存儲，哎呀）

HTML：

<div class="theater">theater 1</div> 
<div class="theater">theater 2</div> 
<div class="theater">theater 3</div> 
<div class="theater">theater 4</div> 
<div class="theater">theater 5</div> 

1 
<input type="text" class="input-for-theater-title"> 
<button class="save-title">Save</button> 
<br>2 
<input type="text" class="input-for-theater-title"> 
<button class="save-title">Save</button> 
<br>3 
<input type="text" class="input-for-theater-title"> 
<button class="save-title">Save</button> 
<br>4 
<input type="text" class="input-for-theater-title"> 
<button class="save-title">Save</button> 
<br>5 
<input type="text" class="input-for-theater-title"> 
<button class="save-title">Save</button> 

<button id="clear">Clear</button> 

的JavaScript：

var theaters = $(".theater"); 
var inputs = $(".input-for-theater-title"); 
var buttons = $(".save-title"); 
theaters.each(function(index) { 
    var name = localStorage.getItem("theater_" + index + "_name") || ""; 
    $(this).html(name); 
    inputs.eq(index).val(name); 
}); 
$(document.body).on("click", ".save-title", function() { 
    var index = buttons.index(this); 
    var title = inputs.eq(index).val(); 
    localStorage.setItem("theater_" + index + "_name", title); 
    theaters.eq(index).text(title); 
});