更简单的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更新？

回答

相关问题