javascript - Java脚本传递变量

Question

这是我的java script。它在图像上的花边，当我点击圆圈时它会放大。但是当我再次单击它时，它应该又是正常大小了。见下图.. http://i.imgbox.com/adbuiwsa.png 这是 javascript 圈子的代码。我需要的是当我再次点击蓝色圆圈时，它应该是正常大小......如何我要编码吗？？我更喜欢它是使用变量完成的......请帮助我。

$('#c1').click(function () {
    clearCircle()
    ResetCircle()

    $(this).removeClass("blink1");
    //$(this).css('background-color', '#005aa8');
    $(this).css('width', '190px');
    $(this).css('height', '190px');
    $(this).css('top', 243 - ((190 - 125) / 2));
    $(this).css('left', 335 - ((190 - 125) / 2));
    $(this).css('background-image', 'URL(assets/images/blue_back.png)');
});

Answer 1

在单击的元素中添加您的类并检查其状态。

$('#c1').click(function(e) {
   var that = $(this);

   if( that.hasClass('active_circle') ) {
       that.removeClass('active_circle');
       // Reset circle to normal state
   }
   else {
       that.addClass('active_circle');
       // Resize circle
   }
});

Answer 2

我无法编辑您的代码，但我有一个同样适用于您的示例：http: //jsfiddle.net/bGAj7/

HTML：

<div class="circle">
    <p>
        Rain passing through a hillside
    </p>
</div>

CSS：

.circle{
    border:3px solid yellow;
    background-color:darkBlue;
    width:100px;
    height:100px;
    border-radius:50px;
    -webkit-border-radius:50px;
    color:#ffffff;
    text-align:center;
}

.circle p{
    height:100%; 
    padding-top:10px;
}

.circle-enlarged{
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

查询：

$('.circle').on('click', function(e){
    $(this).toggleClass('circle-enlarged');
});