使用jquery为样式设置随机值-Setrandomvaluesforstylingwithjquery

作者：倩倩 | 来源：互联网 | 2023-05-18 04:51

Iwanttocreateaborder-radiusgenerator.Ihavecreated4sliders.Onefortopleftradiusonefor

I want to create a border-radius generator.I have created 4 sliders.One for top left radius one for top right radius ,one for bottom left and one for bottom right I have created a div that's supposed to change every corner radius when the users change each slider but even when i move the slider nothing happens Here is my code:

我想创建一个border-radius生成器。我创建了4个滑块。一个用于左上半径,一个用于右上半径,一个用于左下角,一个用于右下角我创建了一个div,它应该在每个角半径时改变用户更改每个滑块,但即使我移动滑块没有任何反应这是我的代码:


                                
                                
                                    


                                
                                
                                    
                                
                                
                                Simple border radius generator
                                Just change the sliders and get the code

3 个解决方案

#1

You have issues in both your Javascript and your html. I also reworked the code to only change the corner that the slider is referencing.

你的Javascript和html都有问题。我还重写了代码,只改变了滑块引用的角落。

$("#codearea").css("border-radius","tl tr bl br"); This is setting the border-radius property to the string 'tl tr bl br', not the combination of those variables.

$(“#codearea”)。css(“border-radius”,“tl tr bl br”);这是将border-radius属性设置为字符串'tl tr bl br',而不是这些变量的组合。

Your tl, tr, bl, br variables are only set once outside your event handler. So any changes to them will not be recorded. 3.
is missing the = sign. So, this div does not have an id

你的tl,tr,bl,br变量只在事件处理程序之外设置一次。因此,不会记录对它们的任何更改。 3.

缺少=符号。所以,这个div没有id

Your input tags were not closed.

您的输入标签未关闭。

The range input fires a change event not a click event.

范围输入触发更改事件而不是单击事件。

HTML

JavaScipt

$(document).ready(function () {
    var $codearea = $("#codearea");
    $('.ranges').on('change', function () {
        var newRad = $(this).val() + "px",
            corner;
        switch ($(this).attr('id')) {
            case 'tl':
                corner = "border-top-left-radius";
                break;
            case 'tr':
                corner = "border-top-right-radius";
                break;
            case 'bl':
                corner = "border-bottom-left-radius";
                break;
            case 'br':
                corner = "border-bottom-right-radius";
                break;
        }
        $codearea.css(corner, newRad);
    });
});

http://jsfiddle.net/9o83vh2p/2/

#2

When you make a call to radius() when a slider changes, it uses the variables that were already set, and only set once, when the page loaded.

当滑块更改时调用radius()时,它会使用已设置的变量,并且只在页面加载时设置一次。

In other words, these lines:

换句话说,这些行:

                            var tl=$("#tl").val() +"px";

                            var tr=$("#tr").val() +"px";

                            var bl=$("#bl").val() +"px";

                            var br=$("btr").val() +"px";

are not re-run when radius() is called.

调用radius()时不会重新运行。

You should really move those into the radius function.

你应该把它们移到半径函数中。

                            var radius =function () {
                                var tl=$("#tl").val() +"px";
                                var tr=$("#tr").val() +"px";
                                var bl=$("#bl").val() +"px";
                                var br=$("btr").val() +"px";

                                $("#codearea").css("border-radius","tl tr bl br");
                            }