javascript - 如何组合这些功能？

Question

编辑:抱歉，我没有更正确地解释这一点，我添加了更多代码。它相当困惑，我认为它可以大大简化，但我在 javascript 方面遇到了很多困难。

我试图在页面上制作一系列带有 + 和 – 的“阅读更多”按钮，单击时这些按钮会被交换。显然，每个人都需要独立于其他人运作。由于 html 放置的原因，我无法使用 css 来实现这一点。 ( 位于 之前)

原帖:我是新来的，也是 javascript/jquery 的新手。我尝试搜索已回答的问题。

如何组合这些功能，这样我就不必一遍又一遍地重复它们。换句话说:用一个函数选择多个ID。

<style>
.more-content {
max-height: 0;
overflow: hidden;
transition: max-height .5s ease;}

.toggle {
display: none;}

.toggle-label {
display: inline-block;
user-select: none;
cursor: pointer;
border: none;
color: #808080;
float: right;}

.toggle-label:hover {
color: #FFFFFF;}

.toggle:checked + .more-content {
display: block;
max-height: 1000px;}
</style>

<label class="toggle-label title" for="more-1" name="moreless1" id="moreless1">+</label>
<input id="more-1" class="toggle" type="checkbox" value="1" onclick="moreless1('more-1','moreless1');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<label class="toggle-label title" for="more-2" name="moreless2" id="moreless2">+</label>
<input id="more-2" class="toggle" type="checkbox" value="1" onclick="moreless2('more-2','moreless2');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<label class="toggle-label title" for="more-3" name="moreless3" id="moreless3">+</label>
<input id="more-3" class="toggle" type="checkbox" value="1" onclick="moreless3('more-3','moreless3');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<label class="toggle-label title" for="more-4" name="moreless4" id="moreless4">+</label>
<input id="more-4" class="toggle" type="checkbox" value="1" onclick="moreless4('more-4','moreless4');">

<div class="more-content">
    <p class="text line24"></br>This is more content.</p>
</div>


<script>
function moreless1(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }

function moreless2(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }

function moreless3(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }

function moreless4(thecheckbox, thelabel) {
        var checkboxvar = document.getElementById(thecheckbox);
        var labelvar = document.getElementById(thelabel);
        if (!checkboxvar.checked) {
            labelvar.innerHTML = "+";
        }
        else {
            labelvar.innerHTML = "-";
        }
    }</script>

Answer 1

首先，这样做怎么样

function moreless(thecheckbox, thelabel) {
    var checkboxvar = document.getElementById(thecheckbox);
    var labelvar = document.getElementById(thelabel);
    if (!checkboxvar.checked) {
        labelvar.innerHTML = "+";
    }
    else {
        labelvar.innerHTML = "-";
    }
}

function moreless1(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

function moreless2(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

function moreless3(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

function moreless4(thecheckbox, thelabel) {
    moreless(thecheckbox, thelabel);
}

进一步的改进是使用不同的参数调用moreless。