Javascript 如何添加添加边框的未限制点击

我想，每次用户将点击广场，它将添加额外的边界类，而不是现在只有一次

这里是小提琴链接：

示例代码：

 $('.box').on('click', function changeBoreder() {
        $(this).addClass('addborder');
    });

---

不能添加两次类。
样式并不意味着相互添加，而是相互覆盖

而是自己修改边框。

var-border=0

然后在click事件中

border += 5;
$(this).css("border", border+"px solid black");

以下是
好吧，您可以使用以下方法执行类似操作：


这是行不通的，因为即使你多次点击它，结果也是一样的。因为类是相同的，只有一个效果

你能做的就是扩大边界。通过使用当前值，并将其添加到您自己的值中，如下所示：

var valuess = parseInt($(this).css('border-width'),10);
// now the code runs and updates it
valuess += 5;
$(this).css('border', valuess + 'px solid #333');

此代码将获取当前边框的宽度，然后替换
px
零件并将其删除。在此之后，它会将
5
作为字符串添加到其中，这就是为什么边框会变为55而不是10。对不起，兄弟，嘿嘿。但这就是您需要的代码！：）祝你好运

小提琴：这是你能做的

 var border = 5;  ///Set the boprder to default 5
 $('.box').on('click', function changeBoreder() {
    $(this).css("border", + border +"px solid black"); // Set the css border to the current element
    border = border + 5; // Increase the value of border by 5..or whatever value you want. So that every time you click it increases the value
 });

如何添加两次类？样式不会添加，它们只会相互覆盖。您只是想通过每次单击使边框逐渐变厚吗？使用class=“addborder addborder addborder”不会改变任何东西，边框不会变大。相反，您必须增加边框，而不是添加CSSclass@Overcode是的，你的意思是
var cnt=5$（'.box'）.on（'click'，function（）{$（this）.css（“border”，（cnt++）+“px纯黑”）；}）
@alonblack-我建议您检查.css（）方法，而不是addClass（）方法。抱歉，这不起作用。因为固体需要放在中间，PX的东西应该在中间。编辑它..这很好，你能解释为什么我需要“border=border+5；”如果我们定义“varvar border=5；”从一开始？@alonblack你可以看一下我的代码：）它已经解释过了，还有一把小提琴要测试..为了增加边框的值，每次点击都要增加..所以第一次点击时它会是5，然后它会将边框的值增加到10，所以下次点击时它会将css设置为10px…等等。。。希望这有帮助…它不会影响屏幕，这是因为5被更改为55。或者您可以只更改边框宽度CSS属性。
var valuess = parseInt($(this).css('border-width'),10);
// now the code runs and updates it
valuess += 5;
$(this).css('border', valuess + 'px solid #333');

 var border = 5;  ///Set the boprder to default 5
 $('.box').on('click', function changeBoreder() {
    $(this).css("border", + border +"px solid black"); // Set the css border to the current element
    border = border + 5; // Increase the value of border by 5..or whatever value you want. So that every time you click it increases the value
 });