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的输入时，“粗体”的复选框将被设置为＆＃39;应该检查。

我已经有了这个功能：

    $('.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');
            }
        });
    });
});

它会立即打开/关闭所有类，这是有道理的。如果输入为粗体，则选中＆＃39;粗体＆＃39;单击粗体输入时选中，取消选中粗体复选框应从输入中删除粗体类。

Answer 1

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

如下所示，我已经简化并整合了javascript。首先，click函数上的$（＆＃39; .textStyleSamples＆＃39;）会监听每个已经有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);
    }
});

Answer 2

<强> jsBin demo

实际上，如果您将班级更改为完全匹配复选框ID

<input type="text" class="underline bold italic" value="Text..." />

这就是您所需要的：

$('.textStyleSamples').on('click', function(){
  $(this).addClass('selected').siblings().removeClass('selected');
  $(".ubem").prop("checked", function(){
    return $('.selected').attr('class').match(this.id); // compare . with #
  });
});

$('.ubem').click(function() {
  $('.selected').toggleClass(this.id, this.checked);
});

很简单，没有？

_{此外，我还从HTML中移除了this-elem="aHover"属性它无效。您应该使用data-*属性，例如：data-elem="aHover"}

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

2 个答案: