javascript - 如何添加无限点击添加边框

Question

我希望每次用户单击正方形时，它都会添加额外的边框类，而不仅仅是现在的 1 次

这是小提琴链接：http: //jsfiddle.net/mtrh5/34/

示例代码：

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

Answer 1

var borderStep = 5;

$('.box').on('click', function changeBoreder() {
    var borderWidth = parseInt($(this).css('border-width'));
    borderWidth += borderStep;
    $(this).css({'border-width':borderWidth+'px'});
});

http://jsfiddle.net/mtrh5/42/

Answer 2

您不能两次添加课程。
样式并不意味着相互添加，它们相互覆盖。

相反，请自己修改边框。
var border = 0;

然后在点击事件中

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

这是jsfiddle

Answer 3

好吧，你可以使用css()做这样的事情：

var px = 1;
$('.box').on('click', function changeBoreder() {
   px++;
   $(this).css("border", px + "px solid #000000");
});

演示

Answer 4

这不起作用，因为即使您多次单击它，结果也会相同。因为类是相同的，并且只会产生一种效果。

你可以做的是扩大边界。通过使用当前值，并将其添加一些您自己的值：

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 的原因。对不起，兄弟，呵呵。但这就是您需要的代码！：） 祝你好运

小提琴：http: //jsfiddle.net/afzaal_ahmad_zeeshan/mtrh5/39/

Answer 5

这是你可以做的...

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

http://jsfiddle.net/mtrh5/37/