javascript - 使用 jQuery 进行动态样式控制

Question

我想根据单击的按钮设置元素样式，例如粗体、斜体、下划线。所以我需要将元素的 id 传递给按钮的 onclick 函数。在这里，我面临着如何获取元素的 id 以动态地执行 onclick 函数。该 ID 不会是静态的。请提出一些想法。

具有类 testClass 和文本“改变我的风格”的 HTML span 元素。这应该是一些 ID，以便任何新创建的元素都不会更改。

<span class="testClass">change my style </span>

     $(document).ready(function () {
        // chethan starts
        $("#btnBold").click(function () {

            $(".testClass").addClass('boldFont');
        });

我正在使用此函数根据单击的按钮更改类。我想将其用作通用样式控件，当我们单击某个按钮时它会出现，并且能够使用此样式控件更改元素的样式。 请建议我:)

Answer 1

只需使用类和数据属性，例如像这样创建按钮:

<a href="#" class="style-toggle" data-style="bold">Bold</a>
<a href="#" class="style-toggle" data-style="italic">Italic</a>
<a href="#" class="style-toggle" data-style="underline">Underline</a>

然后像这样在 jQuery 中绑定(bind)您的事件:

$('.style-toggle').on('click', function(e) {
  e.preventDefault();

  $(this).toggleClass( 'active' );
  $('#element-to-style').toggleClass( $(this).data('style') );
})