更簡單的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按鈕」是什麼意思？ – 2010-07-24 22:26:32

上述作品，但我想知道它是否可以簡化。感謝有關內聯JS的反饋被認爲是不好的做法。 – Gulbahar 2010-07-28 09:09:36

你甚至可以在你的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中的onload，定義這是所有這些按鈕：

由於數據似乎是靜態這裏，一個更好的全球性的辦法可能是定義上的元素本身，以及設置所有處理程序數據在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

無論哪種方式，聯線都是不好的做法*如果可以避免*，恕我直言。我還沒有看到使用內聯腳本的更易維護的項目:) – 2010-07-24 22:45:25

@Nick - 我認爲內聯腳本使代碼庫更易於管理的原因是，代碼根本不是用HTML或JavaScript編寫的，而是在多個級別編譯，依賴關係計算和解析，然後最終的輸出只是*與HTML合併的事件。 hooman從來沒有寫過這樣的代碼:) – Anurag 2010-07-24 22:49:56

我仍然認爲這比'class =「updater」'和'data-html =「....」'更容易管理，它帶有*一組*外部腳本，以及...更少的負載到客戶端，我不知道其實下降:) – 2010-07-24 22:51:43

更簡單的DIV/JavaScript更新？

回答

相關問題