如何“缩短”重复且几乎相同的Javascript/jQuery代码行？

Question

我在使用JavaScript/jQuery编程方面很新，但已经成功运行了以下代码。我相信有一种方法可以让代码更简洁。我尝试过使用each，但没有成功。

这段代码的功能是： 1）您有一些包含“标签”的div。 2）通过输入保存自定义标题到localStorage 3）更新标题

这是jsFiddle链接。

代码如下：

<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>

- Jim

---

"我已经尝试了每一个，但是没有成功。" - 你能展示一下你尝试了什么吗？ - Kostia Mololkin

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参数/变量： 在jsFiddle上的示例（Stack Snippets不支持本地存储，grrr）

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

- T.J. Crowder

---

仅用14行代码实现58行代码？这就是优化！非常感谢T.J. 我唯一的担忧是，通过优化后的代码，我们失去了如果值未存储，则只显示初始值“Theater 1”的部分。 - Jim

@Jim: 啊，抱歉，只是一个编辑错误。只需将 if 加回来，例如：if (name) { $(this).html(name); inputs.eq(index).val(name); } - T.J. Crowder

太棒了！我将它添加到 jsFiddle 上，以防其他人需要查看完整代码：链接 - Jim