jquery - 如何通过复选框更改文本样式并在单击时加载文本的当前样式？

Question

我有以下 HTML 表单:

  <form name="sampleText" id="sample-text">
    <input type="text" readonly="readonly" class="textStyleSamples bolded" this-elem="h1" id="h1Sample" value="Level-1 Header Sample" />
    <input type="text" readonly="readonly" class="textStyleSamples bolded" this-elem="h2" id="h2Sample" value="Level-2 Header Sample" />
    <input type="text" readonly="readonly" class="textStyleSamples bolded" this-elem="h3" id="h3Sample" value="Level-3 Header Sample" />
    <input type="text" readonly="readonly" class="textStyleSamples bolded" this-elem="h4" id="h4Sample" value="Level-4 Header Sample" />
    <input type="text" readonly="readonly" class="textStyleSamples" this-elem="pageText" id="pageTextSample" value="Page Text Sample" />
    <br />
    <input type="text" readonly="readonly" class="textStyleSamples underlined" this-elem="aLink" id="aLinkSample" value="Normal Link Sample" />
    <br />
    <input type="text" readonly="readonly" class="textStyleSamples underlined" this-elem="aVisited" id="aVisitedSample" value="Visited Link Sample" />
    <br />
    <input type="text" readonly="readonly" class="textStyleSamples underlined" this-elem="aHover" id="aHoverSample" value="Hovered Link Sample" />
    <br />
    <input class="ubem" id="underline" type="checkbox" /><u>Underline</u>
    <input class="ubem" id="bold" type="checkbox" /><b>Bold</b>
    <input class="ubem" id="italic" type="checkbox" /><em>Italic</em>
  </form>

我希望能够选择每个输入，并根据选中复选框将输入文本更改为下划线、粗体或斜体。我已经可以使用以下 jQuery 做到这一点:

$('.textStyleSamples').each(function() {
    $(this).on('click', function() {
        $(this).toggleClass('selected');
        $(this).siblings().removeClass('selected');
    });
});

$('.ubem').change(function() {
    $('.textStyleSamples').each(function() {
        if($(this).hasClass('selected')) {
            if ($("#underline").prop("checked")) {
                $(this).addClass('underlined');
            } else {
                $(this).removeClass('underlined');
            }
            if ($("#bold").prop("checked")) {
                $(this).addClass('bolded');
            } else {
                $(this).removeClass('bolded');
            }
            if ($("#italic").prop("checked")) {
                $(this).addClass('italicized');
            } else {
                $(this).removeClass('italicized');
            }
        }
    });
});

我无法弄清楚，以及将其放在哪里，是 jQuery 函数，当单击具有这些样式的输入时，它将检查每种样式的相应框。例如，当单击 H1 Sample 的输入时，应选中“粗体”复选框。

我已经有了这个功能:

    $('.textStyleSamples').each(function() {
        $(this).on('click', function() {
            if ($(this).hasClass('underlined')) {
                $('#underline').prop('checked', true);
            }
            else {
                $('#underline').prop('checked', false);
            }
            if ($(this).hasClass('bolded')) {
                $('#bold').prop('checked', true);
            }
            else {
                $('#bold').prop('checked', false);
            }
            if ($(this).hasClass('italicized')) {
                $('#italic').prop('checked', true);
            }
            else {
                $('#italic').prop('checked', false);
            }
        });
    });

但我不知道如何让它与之前的功能共存。预先感谢您的帮助。

编辑:我尝试这样做:

$('.ubem').change(function() {
    $('.ubem').each(function() {
        $('.textStyleSamples').each(function() {
            if($(this).hasClass('selected')) {
                $(this).toggleClass('underlined');
                $(this).toggleClass('bolded');
                $(this).toggleClass('italicized');
            }
        });
    });
});

它会立即打开/关闭所有类(class)，这是有道理的。如果输入为粗体，并且单击粗体输入时选中了“粗体”复选框，则取消选中粗体复选框应从输入中删除粗体类。

Answer 1

我相信您遇到的问题是 $('.ubem').change() 事件中的 .each 。实际上，您没有理由在任何一个函数中使用 .each，因为我相信您拥有执行所需操作所需的所有数据。

正如您在下面看到的，我简化并合并了 JavaScript。首先，单击函数上的 $('.textStyleSamples') 监听每个已具有 textStyleSamples 类的对象。无需使用 .each 来迭代每个文本框。我还在同一函数中发生了复选框同步。

对于复选框更改事件，我也删除了 .each 并创建一个变量来查找选定的文本框，然后更新其值，而不是尝试迭代每个文本框。

这是一个jsfiddle进行测试。

我认为这就是您正在寻找的:

$('.textStyleSamples').on('click', function() {
    $(this).toggleClass('selected');
    $(this).siblings().removeClass('selected');

    var underlined = $(this).hasClass('underlined');
    $('#underline').prop('checked', underlined);

    var bolded = $(this).hasClass('bolded');
    $('#bold').prop('checked', bolded);

    var italicized = $(this).hasClass('italicized');
    $('#italic').prop('checked', italicized);
});

$('.ubem').change(function() {
    var $thisElement = $(this)[0];
    var $selected = $('.selected');

    if ($thisElement.id === 'underline') {
        $selected.toggleClass('underlined', this.checked);
    } else if ($thisElement.id === 'bold') {
        $selected.toggleClass('bolded', this.checked);
    } else if ($thisElement.id === 'italic') {
        $selected.toggleClass('italicized', this.checked);
    }
});