Question

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

示例代码：

 $('.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");
});

Demo

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的原因。抱歉，那就是hehehe。但那是你需要的代码！祝你好运

小提琴：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/

如何添加无限制的点击添加边框

5 个答案: