Question

我很难解决这个问题，我希望有些人可以引导我朝着正确的方向前进。

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

我想解决的问题是当四个或更多输入为黑色时我想知道连续4个连续输入是否为黑色。

实施例。 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>

CODE：

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

Answer 1

你的问题不明确......这可能对你有帮助......

首先点击Area chart1，然后点击area chart 2

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

使用JS查找和比较顺序div

1 个答案: