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

Posted 2020-10-18 minoz

一、左中右布局，左边定宽，中、右百分比的布局：

（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"} 
      ]   
   }
 ]
}