我如何组合这些功能？

Question

编辑:对不起，我没有更正确地解释这一点，我增加了一些我的代码。它非常混乱，我认为它可以大大简化，但我在javascript方面有很多困难。

我正在尝试做一系列的“阅读更多”按钮在一个页面上的+和-，这些都是交换时，点击。显然，每个人都需要独立地操作。由于html的位置原因，我无法用css实现这一点。(在前面)

原创帖子:我是这里的新手，也是javascript/jquery的新手。我试着搜索回答的问题。

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

<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

你的问题还不清楚。但是，您似乎希望对具有不同ids的相同类型的元素使用单个函数。您尚未定义何时以及如何调用该函数。

但是，要对同一类型的具有不同id的元素使用单个函数，您可以在元素之间定义一个公共类，并在javascript循环中通过它们调用一个函数-

<input type="checkbox" id=checkbox1" class="common-cls" value="Checkbox 1" data-label-id="label1">Checkbox 1
<input type="checkbox" id=checkbox2" class="common-cls" value="Checkbox 2" data-label-id="label2">Checkbox 2
 .........

在剧本里，你可以这样做-

$('.common-cls').each(function() {
    var checkboxvar = this.id;
    var labelvar = $(this).attr('data-label-id');
    moreless(checkboxvar, labelvar );
});

您只需要定义一个没有机器的函数，它就可以完成这项工作。