Question

我有4个单独的无线电选择表格，以及一个div网格，其中包含需要根据所选单选按钮进行排序的信息，以及它们的组合。

例如

<form>
<input type="radio" name="colour" value="Blue" class="colourhook trigger">Blue<br>
<input type="radio" name="colour" value="Red" class="colourhook trigger">Red
</form>

<form>
<input type="radio" name="fruit" value="Apple" class="fruithook trigger">Apple<br>
<input type="radio" name="fruit" value="Orange" class="fruithook trigger">Orange
</form>

<form>
<input type="radio" name="size" value="Big" class="sizehook trigger">Big<br>
<input type="radio" name="size" value="Small" class="sizehook trigger">Small
</form>

和div包含其中包含匹配文本的div

<div class="infobox">
    <div class="colourhook content">Blue</div>
    <div class="fruithook content">Apple</div>
    <div class="sizehook content">Small</div>
    <div class="vehiclehook content">Car</div>
</div>
 <div class="infobox">
    <div class="colourhook content">Red</div>
    <div class="fruithook content">Apple</div>
    <div class="sizehook content">Small</div>
    <div class="vehiclehook content">Bike</div>
</div>
<div class="infobox">
    <div class="colourhook content">Green</div>
    <div class="fruithook content">Orange</div>
    <div class="sizehook content">Medium</div>
    <div class="vehiclehook content">Boat</div>
</div>

所以，如果单击“蓝色”，则只有“colourhook”类中包含“blue”字样的“信息框”才会显示黄色背景。

当我需要“蓝色”选中+“Apple”来设置包含“蓝色”和“苹果”的信息框时，棘手的部分会出现，但不要说包含“蓝色”和“香蕉”的信息框“

我设置了一个文件但是我已经删除了我以前在查询中的尝试，因为我无法让它工作并需要以一种全新的方法开始，任何帮助都将非常感激。

http://jsfiddle.net/bloodygeese/k3965fr5/

Answer 1

监听所有单选按钮的click事件，并创建所有选中复选框的值数组。

然后，循环所有信息框容器以查找数组中的文本。

最后，计算所有匹配并将其与数组中的文本总数进行比较。如果计数等于总数，则添加＆＃34;选择＆＃34;等级到那个信息框。

这是完整的jQuery脚本：

$(document).ready(function(){ 
    $("input:radio").click(function(){  
        // initialize/clear array
        text_array = [];
        // initialize/clear counter
        counter = 0;
        // get all the checked radio buttons's value and add it to the text array
        $( "input:radio:checked" ).each(function(){
                text_array[counter] = $(this).val();
                counter++;
        });
        // loop around on all the infobox
        $(".infobox").each(function(){
            var target = $(this);            
            matched = 0;
            //initialize/clear flag
            flag = [];
            // check all the child divs of the infobox for a match
            for(var i=0; i < text_array.length; i++){
               // loop through all the text in the text array to look for a match
               if ($(this).children(".content").text().match(text_array[i])) {
                    // if theres a match,set the flag for this text index to true
                    flag[i] = true;
                }
               else{
                    // there is no match, so set the flag for this text index to false
                    flag[i] = false;
               }                            
            }
            // count all flags that are true
            for(var k=0; k < flag.length; k++){
                if(flag[k] == true){
                    matched = matched + 1;                    
                }
                else{
                    matched = 0;
                }
            }
            // if the flags,that are true,is equal to the total number of flags
            // it means all the text in the array matched for this infobox
            if(matched == flag.length){
               // so add the highlight class
                target.addClass("selected");
            }
            else{
                target.removeClass("selected");
            }
        });
    });
});

使用此CSS，突出显示与所有单选按钮匹配的信息框：

.selected{
    background: yellow !important;
}

<强> JSfiddle DEMO

使用基于多个输入的jQuery样式多个div

1 个答案: