Detaillierte Fallerklärung_Verwenden von Javascript zum Schreiben der Bedingungsfilterung für Benutzerlistenkombinationen-js-Tutorial-php.cn

Detaillierte Fallerklärung_Verwenden von Javascript zum Schreiben der Bedingungsfilterung für Benutzerlistenkombinationen

php是最好的语言

Freigeben： 2018-08-01 10:40:54

Original

2003 Leute haben es durchsucht

In diesem Artikel wird erläutert, wie man mit nativem JS die Bedingungsfilterung für Benutzerlistenkombinationen schreibt. Die Funktion der kombinierten Bedingungsfilterung kann über Schaltflächen und Eingabetext ausgeführt werden. Nachfolgend wird zunächst die vorherige Darstellung erläutert:

Detaillierte Fallerklärung_Verwenden von Javascript zum Schreiben der Bedingungsfilterung für Benutzerlistenkombinationen Hier wird ein Array zur Simulation der Hintergrunddaten verwendet (Ajax kann zum Anfordern der Hintergrunddaten verwendet werden):

var person = [
    { name: &#39;王小妹&#39;, src: &#39;01pic.jpg&#39;, sex: &#39;male&#39;, des: &#39;漂亮的妹子&#39;},
    { name: &#39;金小妹&#39;, src: &#39;02pic.jpg&#39;, sex: &#39;male&#39;, des: &#39;漂亮的程序媛&#39;},
    { name: &#39;陈小华&#39;, src: &#39;07pic.jpg&#39;, sex: &#39;female&#39;, des: &#39;相互学习&#39;},
    { name: &#39;马爱国&#39;, src: &#39;08pic.jpg&#39;, sex: &#39;female&#39;, des: &#39;喜欢猫&#39;},
    { name: &#39;邓小茜&#39;, src: &#39;04pic.jpg&#39;, sex: &#39;male&#39;, des: &#39;喜欢运动&#39;},
    { name: &#39;马学习&#39;, src: &#39;06pic.jpg&#39;, sex: &#39;female&#39;, des: &#39;喜欢看书&#39;}
]

Nach dem Login kopieren

Haupt-HTML-Struktur:

<body>
    <p class="wrapper">
        <p class="search">
            <input type="text" placeholder="请输入用户名" id="input">
            <ul id="searchUl">
                <li class="active" sex = "all">All</li>
                <li sex = "male">Male</li>
                <li sex = "female">Female</li>
            </ul>
        </p>
        <p class="userList">
            <ul id="list">
                <!-- 方便确定插入数据的结构和样式 -->
                <!-- <li><img src="./images/01pic.jpg" alt="">
                    <span class="name">小航</span>
                    <span class="des">描述</span>
                </li> -->
            </ul>
        </p>
    </p>

    <script src="./searchingData.js"></script>
</body>

Nach dem Login kopieren

Ideen und JS-Kerncode:

1) Rendering-Dom-Struktur: Verwenden Sie die forEach()-Methode zum Durchlaufen des Arrays und Finden der Daten, die die Bedingungen erfüllen, mehrere Li-Strukturcodeblöcke generieren, wenn mehrere Daten vorhanden sind, und dann die generierte Li-Struktur in ul einfügen

var listUl = document.getElementById(&#39;list&#39;);
var oInp = document.getElementById(&#39;input&#39;);
var sUl = document.getElementById(&#39;searchUl&#39;);


//渲染dom结构，遍历数组使用forEach()方法
function render(list){
    var str = &#39;&#39;;
    list.forEach(function(ele, index){
        str += &#39;<li><img src="./images/&#39;+ ele.src +&#39;" alt="">\
        <span class="name">&#39;+ ele.name +&#39;</span>\
        <span class="des">&#39;+ ele.des +&#39;</span></li>&#39;;
    });
    listUl.innerHTML = str;
}

Nach dem Login kopieren

2) Textfilterung in einem einzelnen Eingabefeld: Rufen Sie den in das Eingabefeld eingegebenen Wert ab und binden Sie ein Oninput-Ereignis unter Verwendung der Array-Filtermethode filter() für die Textfilterung: Die Das Klickereignis ist an ul gebunden und wird von li ausgelöst

//获取input输入的value值，需绑定一个oninput事件，获取过滤结果后渲染
oInp.oninput = function(){
    var text = this.value; 
    //state.text = this.value; //组合条件筛选
    render(filterText(text, person)); //单一筛选、渲染
    //render(addFn(filterFn,person)); //组合条件筛选、渲染
}

//输入文本过滤
function filterText(val, arr){
    var fArr = arr.filter(function(ele, index){
        if(ele.name.indexOf(val) !== -1){
            return true;
        }
    })
    return fArr;
}

Nach dem Login kopieren

4) Kombinierte Bedingungsfilterung: Verbinden Sie das kombinierte Objekt (Eingabefeld und Schaltfläche) und die Filterfunktion über die Requisiten der beiden Objekte

//绑定点击事件
sUl.addEventListener(&#39;click&#39;, function(e){
    if(e.target.tagName == &#39;LI&#39;){
        var sex = e.target.getAttribute(&#39;sex&#39;);
        //state.sex = e.target.getAttribute(&#39;sex&#39;); //组合条件筛选
        document.getElementsByClassName(&#39;active&#39;)[0].className = &#39;&#39;; //修改点击按钮的样式
        e.target.className = &#39;active&#39;; //修改点击按钮的样式
        render(filterSex(sex, person));
        //render(addFn(filterFn,person));//组合条件筛选、渲染
    }
})

//点击按钮筛选
function filterSex(sex, arr){
    if(sex == &#39;all&#39;){
        return arr;
    }else{
        var sArr = arr.filter(function(ele, index){
            if(sex == ele.sex){
                return true;
            }
        })
        return sArr;
    }
}

Nach dem Login kopieren

Verwandte Artikel:

JavaScript-Front-End-Daten-Multi-Bedingungsfilterungs-Funktionsimplementierungscode

Beispiel für JavaScript, das die Multi-Bedingungs-Filterfunktion des Front-Ends implementiert Daten

Ähnliche Videos:

Verwendung von JavaScript-Li Yanhui Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonDetaillierte Fallerklärung_Verwenden von Javascript zum Schreiben der Bedingungsfilterung für Benutzerlistenkombinationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!