我在尝试解决这个问题时遇到了困难,希望一些人可以引导我朝正确的方向发展。

当有人单击图表1的div时,我有20个白色div,与图表1和图表2分开。我有一个简单的Jquery,它将隐藏的输入值更改为黑色。当某人单击图表2上的div时,jQuery会将隐藏的输入值更改为selected。

我要解决的问题是四个或更多输入为黑色时,我想知道一行中是否有四个连续输入为黑色。

例如chart1div3,chart1div4,chart1div5,chart1div6,chart1div9。

在此示例图表中,图表1的div 3、4、5、6是顺序的,现在我想知道图表2中的任何选定div是否等于图表1中的任何顺序div,例如chart2div4。

现在,对于最后的障碍,我需要忽略div 1、10、11、20。

我无法弄清楚该怎么做,如果图表1上有四个或更多,我可以返回true,我无法弄清楚如何检查图表2上是否有一个等效于图表2的输入。

我已经来回第四了,我觉得我的代码无法实现。如果有人可以向我展示我的问题的解决方案,我将非常感激。

HTML:

<div id="chart1top" class="top">
    <div><input type="hidden" id="chart1div1" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div2" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div3" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div4" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div5" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div6" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div7" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div8" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div9" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div10" class="color" value="white" /></div>
</div>
<div id="chart1bottom" class="bottom">
    <div><input type="hidden" id="chart1div20" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div19" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div18" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div17" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div16" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div15" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div14" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div13" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div12" class="color" value="white" /></div>
    <div><input type="hidden" id="chart1div11" class="color" value="white" /></div>
</div>
<div id="chart2top" class="top">
    <div><input type="hidden" id="chart2div1" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div2" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div3" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div4" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div5" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div6" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div7" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div8" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div9" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div10" class="pic" value="unselected" /></div>
</div>
<div id="chart2bottom" class="bottom">
    <div><input type="hidden" id="chart2div20" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div19" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div18" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div17" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div16" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div15" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div14" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div13" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div12" class="pic" value="unselected" /></div>
    <div><input type="hidden" id="chart2div11" class="pic" value="unselected" /></div>
</div>


码:

// Get all the inputs
var x = 1;
c1div = {};
c2div = {};
while (x < 20){
    c1div[x] = $('#chart1div'+z).val();
    c2div[x] = $('#chart2div'+z).val();
        }
    }
    z++;
}


var divarray = [];

for(var w in c1div){
    if(c1div[w] == 'black'){
        divarray.push(w);

    }

}

    var hipcount = 1;
    var looparray = [];

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


    if(divarray[i] - divarray[i-1] == 1) {
        hipcount++;
        if(hipcount >= 4){
            console.log('return true:'+ hipcount);
        }
    } else {
        hipcount = 1;
    }
}

最佳答案

您的问题不清楚...这可能会帮助您...

首先单击面积图1,然后单击面积图2

[1]: http://jsfiddle.net/fazalrasel/VJV4a/

09-25 17:05
查看更多