Question

我正在尝试为不同的id设置div的不同css样式，但jquery函数正在改变它们，这里和例子：

我需要每个div不同的功能。

$("#name").click(function(e){
    $("#tool").show();
    $("#tool").offset({left:e.pageX,top:e.pageY});

            $("#text-tool #left").click(function(){                             
                $("#name").css('text-align','left');
            });
            $("#text-tool #center").click(function(){                               
                $("#name").css('text-align','center');
            });
            $("#text-tool #right").click(function(){                                
                $("#name").css('text-align','right');
            });
            $("#color-tool #white").click(function(){                               
                $("#name").css('color','white');
            });
            $("#color-tool #red").click(function(){                             
                $("#name").css('color','red');
            });
            $("#color-tool #blue").click(function(){                                
                $("#name").css('color','blue');
            });
            $("#text-tool #bold").click(function(){                             
                $("#name").css('font-weight','bold');
            });
            $("#text-tool #italic").click(function(){                               
                $("#name").css('font-style','italic');
            });

});
$("#company_name").click(function(a){
    $("#tool").show();
    $("#tool").offset({left:a.pageX,top:a.pageY});

            $("#text-tool #left").click(function(){                             
                $("#company_name").css('text-align','left');
            });
            $("#text-tool #center").click(function(){                               
                $("#company_name").css('text-align','center');
            });
            $("#text-tool #right").click(function(){                                
                $("#company_name").css('text-align','right');
            });
            $("#color-tool #white").click(function(){                               
                $("#company_name").css('color','white');
            });
            $("#color-tool #red").click(function(){                             
                $("#company_name").css('color','red');
            });
            $("#color-tool #blue").click(function(){                                
                $("#company_name").css('color','blue');
            });
            $("#text-tool #bold").click(function(){                             
                $("#company_name").css('font-weight','bold');
            });
            $("#text-tool #italic").click(function(){                               
                $("#company_name").css('font-style','italic');
            });


});

Answer 1

因为click不会覆盖它附加的其他点击事件。

使用

$(selector).off("click").on("click", ....

但设计可以大大改善。没有必要添加大量的事件。

<button class="change" data-prop="font-weight" data-value="bold">BOLD</button>
<button class="change" data-prop="font-color" data-value="blue">BLUE</button>

比单击处理程序更多并使用具有数据属性的事件委派来控制更改的内容。使维护更容易。

(function(){   
    var activeElem = "#name";    
    $("#name, #company_name").click(function(){  
        activeElem = this;
    });    
    $(document).on("click", "button", function () { 
        var btn = $(this);
        $(activeElem).css(btn.data("prop"), btn.data("value"));
    });    
}());

不同id的功能不起作用

1 个答案: