Heim > Artikel > Web-Frontend > Detaillierte Fallerklärung_Verwenden von Javascript zum Schreiben der Bedingungsfilterung für Benutzerlistenkombinationen

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

php是最好的语言Original: 2018-08-01 10:40:542059Durchsuche

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;}
]

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>

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;
}

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;
}

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;
    }
}

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie js, um zu bestimmen, ob das Kontrollkästchen aktiviert ist, und verwenden Sie js, um das Kontrollkästchen zu bedienenNächster Artikel：Verwenden Sie js, um zu bestimmen, ob das Kontrollkästchen aktiviert ist, und verwenden Sie js, um das Kontrollkästchen zu bedienen

In Verbindung stehende Artikel

Mehr sehen