개별 클래스 및 값 받기

jsFiddle에 플러그인없이 작동하는 키보드를 만들고 있습니다. 개별 버튼으로 각 버튼을 가지고 있지만, 내 $().append() 기능을 작동 시키려면 짧은 코드를 클릭하여 버튼의 값을 및 값으로 가져와야합니다. 이 작업을 수행하는 유일한 방법은 각 단추에 대한 변수를 만들고 각 단추에 대해 $().click() 함수를 만드는 것입니다.개별 클래스 및 값 받기

HTML :

<button class='q'>Q</button><button class='w'>W</button><button class='e'>E</button>  <button class='r'>R</button><button class='t'>T</button><button class='y'>Y</button><button class='u'>U</button><button class='i'>I</button><button class='o'>O</button><button class='p'>P</button><br /> 
<button style='margin-left: 23px;' class='a'>A</button><button class='s'>S</button><button class='d'>D</button><button class='f'>F</button><button class='g'>G</button><button class='h'>H</button><button class='j'>J</button><button class='k'>K</button><button class='l'>L</button><br /> 
<button style='margin-left: 70px;' class='z'>Z</button><button class='x'>X</button><button class='c'>C</button><button class='v'>V</button><button class='b'>B</button><button class='n'>N</button><button class='m'>M</button> 
<br /> 
<br /> 
<h1></h1>

CSS :

body: { 
    text-align: center 
} 
button { 
    width: 40px; 
    height: 40px; 
    background: white; 
    border: 2px solid #6699ff; 
    border-radius: 10px; 
    color: #6699ff; 
    transition: 0.1s linear; 
    margin: 3px; 
} 
button:hover { 
    border: 2px solid #5c8ae6; 
    color: #5c8ae6 
} 
button:active{ 
    border: 2px solid #5c8ae6; 
    background: #5c8ae6; 
    color: white; 
} 
button:focus { 
    outline: 0 
}

출처

2014-07-11 Joe P.

각 버튼의 편지를 얻으려면 ...

이 시도 :

$(document).ready(function() { 
    $('button').click(function() { 
      //alert($(this).html()); 
      $('h1').append(this.textContent); 
    }); 
});

사업부에서 1,913,210

출처

2014-07-12 00:00:24 imbondbaby

를 사용 . 편지를 받고 그걸로 뭔가를 할 수 있기를 바랍니다. –

또한 경고를'$(). append()'로 바꿀 때 –

이 아닌 전체 버튼을 덧붙인다.'$ ('button')으로 문자를 얻을 수있다 .html()' – imbondbaby

랩 버튼

<div class="buttons"> 
    <button class='q'>Q</button><button class='w'>W</button><button class='e'>E</button><button class='r'>R</button><button class='t'>T</button><button class='y'>Y</button><button class='u'>U</button><button class='i'>I</button><button class='o'>O</button><button class='p'>P</button><br /> 
    <button style='margin-left: 23px;' class='a'>A</button><button class='s'>S</button><button class='d'>D</button><button class='f'>F</button><button class='g'>G</button><button class='h'>H</button><button class='j'>J</button><button class='k'>K</button><button class='l'>L</button><br /><button style='margin-left: 70px;' class='z'>Z</button><button class='x'>X</button><button class='c'>C</button><button class='v'>V</button><button class='b'>B</button><button class='n'>N</button><button class='m'>M</button> 
</div> 
<br /> 
<br /> 
<h1></h1> 
<div class="output"></div>

다음은 당신이 바이올린을 보면, 당신은 분명 버튼의 글자를 볼 수 있습니다 on

$(function(){ 
    $(".buttons").on("click", "button", function(e){ 
     $(".output").append(this.className); 
     // Or text() 
     // $(".output").append($(this).text()); 
    }); 
});

JSFiddle

출처

2014-07-12 00:09:17

개별 클래스 및 값 받기

답변

관련 문제