javascript - Material 设计和 Jquery

Question

http://codepen.io/alcoven/pen/XJeEQy

我试图让这些圆圈中的每一个都激活自身，而不在单击时更改其余圆圈。我在单击 $('button') 时使用了 $(this)('button') 和 $this.children('blub') 现在不仅这些不起作用，而且从中心开始的 Material 圈增长也不起作用工作要么。在内容中滑动的点击函数脚本上方的脚本应该创建一个慢慢填充背景并淡出的范围。

HTML

<button class="blup active">Define<div class="button-text">This is test copy this is test copy this its test copy this is test copy this is test copy.This is test copy this is test copy this its test copy this is test copy this is test copy.</div></button>

<button class="blup active">Describe</button>
<button class="blup active">Discover</button>
<button class="blup active">Design</button>
<button class="blup active">Develop</button>
<button class="blup active">Deliver</button>

JS

var addRippleEffect = function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() !== 'button') return false;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector('.ripple');
    if (!ripple) {
        ripple = document.createElement('span');
        ripple.className = 'ripple';
        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
        target.appendChild(ripple);
    }
    ripple.classList.remove('show');
    var top = e.pageY - rect.top - ripple.offsetHeight / 4 - document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth / 4 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    ripple.classList.add('show');
    ripple.classList.add('grow');
    return false;
}

document.addEventListener('click', addRippleEffect, false);

function morph(){
  var morphSniff = $('button').css('border-radius'); 
  if(morphSniff == "100%"){
    $('button').css('border-radius':'0%');
    $('.button-text').slideToggle();
  }
  else{
    $('button').css('border-radius':'100%');
    $('.button-text').slideToggle();
  }
};
$('button').click(function(){
    morph();
    return false; 
  });

Answer 1

尝试通过提供此上下文来仅更改单击的圆圈:

function morph() {
    var morphSniff = $(this).css('border-radius');
    if (morphSniff == "100%") {
        $(this).css('border-radius': '0%');
        $('.button-text').slideToggle();
    } else {
        $(this).css('border-radius': '100%');
        $('.button-text').slideToggle();
    }
};

$('button').click(morph);

演示:http://codepen.io/anon/pen/myBLwm