使用 jQuery 进行动态样式控制答案

【问题标题】：Dynamic styling control using jQuery使用 jQuery 进行动态样式控制
【发布时间】：2014-04-16 16:23:21
【问题描述】：

我想根据单击的按钮设置元素样式，例如粗体、斜体、下划线。所以我需要将元素的 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');
        });

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

【问题讨论】：

标签： javascript jquery html asp.net css

【解决方案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 中绑定你的事件：

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

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

【讨论】：

【解决方案2】：

可以通过事件对象获取按钮的id。

// buttons is the class applied to all the clickable buttons
$(".buttons").click(function (event) {
    var button = this;
    var buttonID = $(button).attr('id');
    // buttonId is the id of the button clicked i.e `btnBold`
    $(".testClass").addClass('boldFont');
});

【讨论】：

您的答案似乎更接近了。但我需要将被点击元素的 id 传递给 jquery 函数，以便动态修改样式。在这种情况下，我需要 span 元素的 id。该样式控件将在单击要修改的元素时出现。

【解决方案3】：

我不确定我是否理解你的问题。

           $(document).ready(function() {
                $("#btnBold").click(function() {
                    clickMe(this, "boldFont");
                });
            });
            var clickMe = function(elem, style) {
                if (!$(elem).hasClass(style)){  
                    $(elem).addClass(style);
                }
            }

您可以使用“clickMe”功能来处理您需要的所有元素。

【讨论】：