使用复选框在两个不同的标签内容之间切换答案

【问题标题】：Toggle between two different tag contents using checkbox使用复选框在两个不同的标签内容之间切换
【发布时间】：2020-11-15 08:35:44
【问题描述】：

HTML

<body class="music">
  <pre class="chord">Chords</pre>
  <div class="lyric" style="display: none">Lyrics</div>
  <input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>

请帮助我处理 jquery 代码。默认情况下，仅显示前标记内容。选中复选框时，我只需要显示 div 标签的内容。当未选中该框时，我希望发生相反的情况，即仅显示 pre 标记的内容。

【问题讨论】：

最简单的方法是使用 jQuery 切换，它会根据当前值将元素的 css display 值更改为 hide/show。下面是一个例子：stackoverflow.com/a/63091686/1401808 请问你为什么有data-on 和data-off 属性？
使用data-on和data-off的原因如下：jsfiddle.net/5ox6ynm7

标签： html jquery checkbox togglebutton

【解决方案1】：

所以，继续前面的评论，这里是您可能想要使用的代码。

$(function(){
  var chord = $(".chord");
  var lyric = $(".lyric");
  var event = $("#event");
  event.on("change", function(){
    chord.toggle();
    lyric.toggle();
  });
})

通过利用 HTML 中的数据属性，更好的方法是根据复选框选择更新 pre 内容

$(function(){
    var selection = $(".selection");
    var event = $("#event");
    event.on("change", function(){
        var content = $(this).is(":checked") ? $(this).data("on") : $(this).data("off");
        selection.text(content);
    });
})

<script 
    src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
  <pre class="selection">Chords</pre>
  <input
    class="c"
    id="event"
    type="checkbox"
    checked data-toggle="toggle"
    data-size="small"
    width="5px"
    data-onstyle="info"
    data-offstyle="info"
    data-on="Chords"
    data-off="Lyrics" />
</body>

【讨论】：

【解决方案2】：

HTML：

<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<input type="checkbox" checked id="checkbox">

CSS：

#content2 {
    display: none;
}

JS（使用 JQuery）：

$(function() {
    $('#checkbox').on('click', function() {
        if (!$(this).is(':checked')) {
            $('#content1').hide();
            $('#content2').show();
        } else {
            $('#content1').show();
            $('#content2').hide();
        }
    });
});

如果您有任何问题，请提出。

【讨论】：

【解决方案3】：

您只需要切换显示。我用 div 替换了 pre 标签作为间距

function jsdisplay(){
$(".chord").eq(0).toggle();
$(".lyric").eq(0).toggle();
}

pre{
margin:0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
  <pre class="chord">Chords</pre>
  <div class="lyric" style="display: none">Lyrics</div>
  <input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>

【讨论】：

问题是我无法更改pre标签。
然后不要。无论哪种方式，它都会起作用。如果你想要相同的展示位置，只需添加 margin:0
其实这是一个演示示例。我需要在标签内写长文本并保留空格。