간단한 DIV/JavaScript 업데이트?

이것은 초보자 질문입니다. DIV를 업데이트하고 INPUT 버튼을 누른 상태로 유지하면 다음 HTML/JavaScript 코드를 더 단순화 할 수 있습니까?간단한 DIV/JavaScript 업데이트?

<div id="main_section" name="main_section"> 
    <div id="update_div">Old stuff</div> 
    <input type="button" value="Update" id="update_button"/> 
</div> 

<script type="text/javascript" src="/jquery.js"></script> 

<script type='text/javascript'> 
    $("#update_button").click(function() { 
     $("#update_div").html("New stuff"); 
    }) 
</script>

감사합니다.

출처

2010-07-24 Gulbahar

질문을 명확히 할 수 있습니까? 지금이 일을하고 있지 않다는 점을 당신이 원하는 바가 무엇입니까? 그 버튼을 누르면'# update_div'의 innerHTML 만 업데이트됩니다. "DIV를 업데이트하고 INPUT 버튼을 유지하는 것"은 무엇을 의미합니까? –

위의 코드는 작동하지만 단순화 할 수 있는지 궁금합니다. 인라인 JS가 나쁜 습관으로 간주되는 것에 대한 피드백에 감사드립니다. – Gulbahar

HTML에서 JavaScript 코드를 인라인으로 처리 할 수도 있지만 정확히을 아는 경우가 아니면 끔찍한 습관입니다. 당신이 클릭에 그와 함께 업데이트되는 어떤 지식을 인코딩하려면

<div id="update_div">Old stuff</div> 
<input type="button" value="Update" onclick="$('#update_div').html('...')" />

는, 당신은 HTML 요소 자체에 그 지식을 인코딩 할 수 있습니다 :로 읽습니다.

<div id='target'>Old</div> 
<input type='button' value='Update' data-target='#target' date-value='New' />

jQuery의 온로드에서

는, 이러한 모든 버튼이 정의 :

데이터가 여기에 정적 것 같다 보낸 사람, 더 나은 글로벌 접근 방식은 요소 자체 및 설정 모든 핸들러의 데이터를 정의 할 수 있습니다 DOM을 한 번의 글로벌 스윕으로

$(function() { 
    $(':button').click(function() { 
     var dest = $(this).attr('data-target'); 
     var value = $(this).attr('data-value'); 
     $(dest).html(value); 
    }); 
});

위의 코드는 여전히 외부 JavaScript를 필요로하지만 페이지의 모든 버튼과 div 요소에 대해 한 번만 필요합니다.

출처

2010-07-24 22:42:39 Anurag

인라인은 피할 수없는 경우 *, imho. 나는 아직 인라인 스크립트로 유지 보수가 가능한 프로젝트를 보았습니다 :) –

@Nick - 코드베이스를 관리하기 쉽게 만드는 인라인 스크립트에 대한 제 아이디어는 코드가 HTML이나 JavaScript로 작성되지 않고 대신 여러 레벨로 컴파일 된 경우입니다. 의존성을 계산하고 분석 한 다음 최종 결과물을 HTML과 병합 한 이벤트에만 적용합니다. 호 모만은 그 코드를 쓰지 않습니다 :) – Anurag

나는 여전히 클래스가 아닌 "updater"와'data-html = "...."과 같이 관리하기가 쉽지 않다고 생각합니다. 음 ... 그리고 적은 페이로드 클라이언트에, 나는 실제로 단점에 대해 잘 모르겠습니다 :) –

간단한 DIV/JavaScript 업데이트?

답변

관련 문제