jQuery를 사용하여 버튼 값 검색
간단한 것, jQuery를 사용하여 버튼을 눌렀을 때 버튼의 값 속성을 검색하려고합니다.
<script type="text/javascript">
$(document).ready(function() {
$('.my_button').click(function() {
alert($(this).val());
});
});
</script>
<button class="my_button" name="buttonName" value="buttonValue">
Button Label</button>
Firefox에서 내 경고는 'buttonValue'를 표시하지만 IE7에서는 '버튼 레이블'을 표시합니다.
버튼의 값을 항상 얻으려면 어떤 jQuery를 사용해야합니까? 아니면 다른 접근 방식을 사용해야합니까?
감사합니다.
답변 : 저는 지금
<input class="my_button" type="image" src="whatever.png" value="buttonValue" />
나는 이것이 얼마 전에 게시되었음을 알고 있지만 누군가가 답변을 찾고 있고 실제로 입력 요소 대신 버튼 요소를 사용하고 싶은 경우 ...
당신은 할 수 사용 .attr('value')또는 .val()IE에서 버튼. IE는 .val () 및 .attr ( "value")를 value 속성의 실제 값 대신 버튼 요소의 텍스트 레이블 (내용)로보고합니다.
버튼의 레이블을 일시적으로 제거하여 문제를 해결할 수 있습니다.
var getButtonValue = function($button) {
var label = $button.text();
$button.text('');
var buttonValue = $button.val();
$button.text(label);
return buttonValue;
}
IE의 버튼에는 몇 가지 다른 단점이 있습니다. 여기에 가장 일반적인 두 가지 문제에 대한 수정 사항을 게시 했습니다 .
버튼 값은 속성이므로 jquery에서 .attr () 메서드를 사용해야합니다. 이것은 그것을해야한다
<script type="text/javascript">
$(document).ready(function() {
$('.my_button').click(function() {
alert($(this).attr("value"));
});
});
</script>
attr을 사용하여 속성, 문서의 추가 정보를 설정할 수도 있습니다 .
이것은 JQuery 1.6 이상에서만 작동합니다. 이전 버전에 대한 포스트 모던의 답변을 참조하십시오.
버튼에 값 속성이 없습니다. 버튼의 텍스트를 얻으려면 :
$('.my_button').click(function() {
alert($(this).html());
});
새로운 HTML5 사용자 정의 데이터 속성을 사용할 수도 있습니다.
<script type="text/javascript">
$(document).ready(function() {
$('.my_button').click(function() {
alert($(this).attr('data-value'));
});
});
</script>
<button class="my_button" name="buttonName" data-value="buttonValue">Button Label</button>
버튼에 값 속성을 부여한 다음 다음을 사용하여 값을 검색합니다.
$("button").click(function(){
var value=$(this).attr("value");
});
버튼에 이것을 시도하십시오.
<input type="button" class="my_button" name="buttonName" value="buttonValue" />
포스트 포스트 모던에서 영감을 받아 .val ()이 내 자바 스크립트 코드 전체에서 작동하도록 만들었습니다.
jQuery(function($) {
if($.browser.msie) {
// Fixes a know issue, that buttons value is overwritten with the text
// Someone with more jQuery experience can probably tell me
// how not to polute jQuery.fn here:
jQuery.fn._orig_val = jQuery.fn.val
jQuery.fn.val = function(value) {
var elem = $(this);
var html
if(elem.attr('type') == 'button') {
// if button, hide button text while getting val()
html = elem.html()
elem.html('')
}
// Use original function
var result = elem._orig_val(value);
if(elem.attr('type') == 'button') {
elem.html(html)
}
return result;
}
}
})
It does however, not solve the submit problem, solved by postpostmodern. Perhaps this could be included in postpostmodern's solution here: http://gist.github.com/251287
if you want to get the value attribute (buttonValue) then I'd use:
<script type="text/javascript">
$(document).ready(function() {
$('.my_button').click(function() {
alert($(this).attr('value'));
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").toggle();
var x = $("#hide").text();
if(x=="Hide"){
$("button").html("show");
}
else
{
$("button").html("Hide");
}
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
</body>
</html>
ReferenceURL : https://stackoverflow.com/questions/487056/retrieve-button-value-with-jquery
'program story' 카테고리의 다른 글
| 번들 명령을 찾을 수 없음 Mac (0) | 2021.01.05 |
|---|---|
| 'automaticallyAdjustsScrollViewInsets'는 iOS 11.0에서 더 이상 사용되지 않습니다. (0) | 2021.01.05 |
| 모든 활동으로 애플리케이션을 종료하는 방법은 무엇입니까? (0) | 2021.01.05 |
| 여러 세트 요소를 단일 세트로 병합 (0) | 2021.01.05 |
| Spring Boot 웹 애플리케이션에서 JSP 파일이 렌더링되지 않음 (0) | 2021.01.05 |