如何“缩小”重复几乎相同的javascript / jQuery行？

2019年7月28日 85次阅读

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

最佳答案 循环和字符串连接,在下面查找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(您已经大部分都有公共类)和本地存储的示例;关键是索引参数/变量：

On 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);
});
点赞