Question

我有一个创建的动态搜索，它从输入表单中获取数据，并在对象数组中搜索匹配项。这些匹配（如果存在）显示在结果的一行上，并带有一个＆＃39;按钮＆＃39;单击以对该特定搜索结果行执行操作。

数组中的每个对象都对应于结果的一行，假设搜索项在该对象中找到。

我创建了一个委托监听器来监听每个显示结果行的按钮点击次数。如何让按钮对索引进行操作：数字＆＃39;包含在创建该行结果的对象中。

到目前为止，我的代码如下：

var multiArr = [
{label: "Asap Rocky", song: "National", index: 0},
{label: "Rihanna", song: "Umbrella", index: 1},
{label: "Coldplay", song: "Paradise", index: 2}];



$('#results').on("click", ".result-button", function(event) {
    alert("You clicked:" + event.target.nodeName);
    console.dir($(this).text);
});




$("#finder").keyup(function(e){
        var q = $("#finder").val();
        console.log("Search Bar contents: " + q);

        var pattern = new RegExp( "^" + q, "i");

        $("#results").empty();

        for (var i = 0; i < multiArr.length; i++){

            console.log("Checking for " + q + " in " + multiArr[i].label);
            console.log("The above is " + pattern.test(multiArr[i].label));

            if (pattern.test(multiArr[i].label)) {
                console.log("something in here beings with " + q);

                /*console.log("Img Url: " + thaArr);*/
                //do something
                $("#results").append("<div class='result-line'><div class='result-img'><img src='http://img.youtube.com/vi/36wDeLKKoXE/default.jpg' class='center-result-img'></div><div class='result-song-info'><div class='result-song-title'><p>" + multiArr[i].song + "</p></div><div class='result-song-artist'><p>" + multiArr[i].label + "</p></div></div><div class='result-button'>>></div></div>");
            } 

        }
    });

Answer 1

一个简单的解决方案是首先将数据属性附加到结果按钮本身，然后在单击回调中获取该数据，其中您附加的数据是元素的索引值。

顺便说一句，你会添加到你附加到#results的结果按钮div，即：

"<div class='result-button'>"

以下数据属性：

"<div class='result-button' data-id='" + multiArr[i].index + "'>"

然后，在您的点击回调中，您只需使用以下内容获取该ID：

$(this).data("id")

现在，为了防万一这样做，我决定通过改进你的代码来帮助你。我做的主要改进是我的例子没有在每次过滤器更改时重新创建html。相反，所有数据都在开始时附加到页面，然后根据标签文本隐藏或显示它。此外，我改变了构建元素的方式，以便将来更容易编辑。

JSFiddle：http://jsfiddle.net/seibert_cody/j4rqdh8L/

HTML：

<input id="finder" type="text">
<div id="results"></div>

JS：

$(document).ready(function(){ 
    // Set up the test data
    var multiArr = [
        {
            label: "Asap Rocky", 
            song: "National", 
            index: 0
        },
        {
            label: "Rihanna", 
            song: "Umbrella", 
            index: 1
        },
        {
            label: "Coldplay", 
            song: "Paradise", 
            index: 2
        }
    ]; 

    // Append it all to the #results page initially
    for (var i = 0; i < multiArr.length; i++){  
        $("#results").append(
            $("<div class='result-line'></div>").append(
                $("<div class='result-img'></div>").append(
                    $("<img src='http://img.youtube.com/vi/36wDeLKKoXE/default.jpg' class='center-result-img'>")
                ).append(
                    $("<div class='result-song-info'></div>").append(
                        $("<div class='result-song-title'></div>").append(
                            $("<p>" + multiArr[i].song + "</p>")
                        )
                    )
                ).append(
                    $("<div class='result-song-artist'></div>").append(
                        $("<p>" + multiArr[i].label + "</p>")
                    )
                ).append(
                    $("<div class='result-button' data-id='" + multiArr[i].index + "'>Play</div>")
                )
            )
        );      
    }

    // Clicked on the play button
    $('#results').on("click", ".result-button", function(event){
        console.log($(this).data("id"));
    }); 


    // Only show the labels matching filter
    $("#finder").keyup(function(e){
        var q = $("#finder").val(); 
        var pattern = new RegExp( "^" + q, "i");

        $("#results").children().each(function(child){
            var label = $(this).find(".result-song-artist p").html(); 
            if (pattern.test(label)){
                $(this).show();
            }else{
                $(this).hide();
            }
        });  
    });
});

来自数组的jQuery动态搜索结果

1 个答案: