码迷,mamicode.com
首页 > 其他好文 > 详细

工作中碰到的一些问题以及解决方法

时间:2017-12-18 14:21:25      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:数据   log   动态显示   for   ++   inner   ajax   end   文本   

一、左中右布局,左边定宽,中、右百分比的布局:

(1)HTML代码:

<div class="three-left">
    
</div>
<div class="three-right-container">
    <div class="three-mid">
    
    </div>
    <div class="three-right">
    
    </div>
</div>

(2)CSS代码:

.three-left {
  float: left;
  width: 300px;  
}

.three-right-container {
  margin-left: 300px;  
}

.three-mid {
  float: left;
  width: 50%;  
}

.three-right {
  float: left;
  width: 50%;  
}

二、左中右布局,中定宽,左右百分比的布局:

(1)HTML代码:

<div class="three-left">
    <div class="innerLeft"></div>
</div>
<div class="three-mid">
    
</div>
<div class="three-right">
    <div class="innerRight"></div>
</div>

(2)CSS代码:

.three-left,
.three-right {
    float: left;
    width: 50%;
    margin:0 0 0 -151px;
}
.innerLeft,
.innerRight {
    margin: 0 0 0 151px;
    background-color: #efefef;
}
.three-mid {
    float: left;
    width: 300px;
    background-color: #ccc;
}

三、jquery获取本地json文件的方法:

$.ajax({
    url: "test.json",
    dataType: "json",
    success: function(result){
        //result即为该json文件的数据
    }
});

四、获取DOM元素的data属性:

(1)HTML代码:

<div data-value="1"></div>

(2)jquety代码:

var _data = $("div").attr("data-value");
console.log(_data);    //_data的值即为HTML代码中div的data-value的值

五、动态添加元素的点击事件:

(1)HTML代码:

<div class="content">
   <ul></ul>
</div>

 

(2)jquery代码:

$(".content").append("<li>需要添加的内容</li>");

// 动态添加的li列表的点击事件
$(".content ul").delegate("li", "click", function(){
    // 点击事件的动作
});

六、获取json文件的数据,并加载到下拉列表以及文本框,再根据下拉列表的值动态显示文本框的值的方法:

 (1)HTML代码:

<div class="content">
    <div class="select-content"></div>
    <div class="list-content">
        <ul></ul>
    </div>
    <div class="show-content">
        <ul></ul>
    </div>
</div>

 

(2)jquery代码:

 

$.ajax(function(){
    url: "test.json",
    dataType: "json",
    success: function(result){
        var list = result.list;
         $(".select-content").html(list[0].name);    //下拉框的默认显示list列表的第一条数据
         for(var i = 0; i < list[0].length; i ++){
             $(".show-content").append("<li>‘ + list[0].typeList[i].name + ‘</li>"); 
        }    //文本展示框默认显示list列表第一条typeList数据
         for(var i = 0; i < list.length; i ++){
             $(".list-content ul").append("<li data-value="‘ + i + ‘">‘ + list[0.name + ‘</li>"); 
         }    //下拉框列表的展示数据

    //下拉框的点击事件
        $(".list-content ul").delegate("li", "click", function(){
            $(".show-content").empty();
            var _liVal = $(this).attr("dta-value");
            $(".select-content").html(list[_liVal].name);
            for(var i = 0; i < list[_liVal].typeList.length; i ++){
             $(".list-content ul").append("<li>‘ +list[_liVal].typeList.name + ‘</li>"); 
         }    //根据下拉框选中的值再显示文本框的值
        });
    }
});

            

 (3)test.json数据文件:

{
"list":[
  {
     "name": "aaa",
     "typeList": [
         {"name": "aaa1"}, 
         {"name": "aaa2"}, 
         {"name": "aaa3"} 
      ]   
   },
   {
     "name": "bbb",
     "typeList": [
         {"name": "bbb1"}, 
         {"name": "bbb2"}, 
         {"name": "bbb3"} 
      ]   
   }
 ]
}

 

工作中碰到的一些问题以及解决方法

标签:数据   log   动态显示   for   ++   inner   ajax   end   文本   

原文地址:http://www.cnblogs.com/minozMin/p/8056881.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!