看看我这个js能优化吗？

Question

本帖最后由 yaganblw 于 2013-01-14 14:37:08 编辑

Answer 1

感觉这个结构操作起来不是很灵活,参考一下这个：<div id="food">
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
</div>

Answer 2

用正则替换，效率应该是没问题的 <dl id="food">
    <dt>蔬菜</dt>
    <dd><a href="radish.html">萝卜</a></dd>
    <dd><a href="cabbage.html">大白菜</a></dd>
    <dt>水果</dt>
    <dd><a href="apple.html">苹果</a></dd>
    <dd><a href="banana.html">香蕉</a></dd>
    <dd><a href="orange.html"></a>橘子</dd>
    <dt>肉类</dt>
    <dd><a href="pork.html">猪肉</a></dd>
    <dd><a href="beef.html">牛肉</a></dd>
</dl>
 
<script>
  
  $(function () {
    $("#food > dd").hide();
    var url=location.href.match(/(\w+\.\w+)([?#].+)?$/)[1] ;
    var html=$("#food").html().split(/(?=<dt>)/i);
    va htmls=$.map(html,function(v,i){
        return v.indexOf(url)!=-1? v.replace(/<dd[^>]+>/ig,'<dd style="display:block">'):v;
    });
    $("#food").html( htmls.join('') );
 
});
</script>

Answer 3

 var  htmls=$.map(html,function(v,i){ ==> var  htmls=$.map(html,function(v,i){ 
少了个r
 
  $(function () {
    $("#food > dd").hide();
    var url=location.href.match(/(\w+\.\w+)([?#].+)?$/)[1] ;
    var html=$("#food").html().split(/(?=<dt>)/i);
    var  htmls=$.map(html,function(v,i){
        return v.indexOf(url)!=-1? v.replace(/<dd[^>]+>/ig,'<dd style="display:block">'):v;
    });
    $("#food").html( htmls.join('') );
  
});

Answer 4

美工只是提供设计稿，html结构还需要js交互，所以这个完全可以自己来改。
让美工重构一下css就行。这个可以跟他沟通，解释。

Answer 5

html结构没问题
初始化隐藏dd，可以用css来做
#food dd { display:none; }