Question

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

具有类testClass和text＆＃34的HTML span元素;改变我的风格＆＃34;。这应该是一些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中绑定你的事件，如下所示：

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

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

Answer 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');
});

Answer 3

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

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

你可以使用＆＃34; clickMe＆＃34;适用于您需要的所有元素。

使用jQuery进行动态样式控制

3 个答案: