2017-05-23 46 views
0

我有一个问题,如果“检查”功能“如果”,它根本不工作。 我不知道我在做什么错。 当硬编码就像这样:如何使用innerHTML连接数组元素?例如元素[0] .innerHTML

if(a.innerHTML == nazwa && b.innerHTML == nazwa && c.innerHTML == nazwa){ 
call(a1, a2, a3, nazwa) 
} 

(a1 = "a", a2 = "b", a3 = "c") 

一切工作得很好,但是当数据从阵列没有任何反应。 也许这是数组[0] .innerHTML的东西? 请帮忙! :d因为你的testy变量是一个字符串数组,而不是对象的数组

$(function(){ 
 

 
    var x = "o", 
 
     flag; 
 

 
    var a = document.getElementById("a"), 
 
     b = document.getElementById("b"), 
 
     c = document.getElementById("c"), 
 
     d = document.getElementById("d"), 
 
     e = document.getElementById("e"), 
 
     f = document.getElementById("f"), 
 
     g = document.getElementById("g"), 
 
     h = document.getElementById("h"), 
 
     i = document.getElementById("i"); 
 

 
    var testy = ["abc", "def", "ghi", "adg", "beh", "cfi", "aei", "gec"]; 
 
    
 
    var styleWin = {"background-color": "yellow", 
 
        "color" : "red" }; 
 
    
 

 

 
    // abc 
 
    // def 
 
    // ghi 
 
    // abc, def, ghi, adg, beh, cfi, aei, gec 
 
    //check if we have 3 in row, if yes, alert winner 
 
    function check(nazwa){ 
 
    // When hardcoded like so, works perfect!! 
 
    // if(a.innerHTML == nazwa && b.innerHTML == nazwa && c.innerHTML == nazwa){ 
 
    // call(a1, a2, a3, nazwa) 
 
    // } 
 
    
 
    for(var ij = 0; ij < testy.length; ij++){ 
 
     testy[ij].split(""); 
 
     console.log("cons 0 = " + testy[ij][0] + " cons 1 = " + testy[ij][1] + " cons 2 = " + testy[ij][2]); 
 
     if(testy[ij][0].innerHTML == nazwa && testy[ij][1].innerHTML == nazwa && testy[ij][2].innerHTML == nazwa){ 
 
     call(testy[ij][0], testy[ij][1], testy[ij][2], nazwa); 
 
     console.log("NAZWA " + nazwa); 
 
     } 
 
    } 
 
    }; 
 
    
 
    function call(f1, f2, f3, n1){ 
 
     console.log("Wygrał! " + n1); 
 
     // console.log(testy[0]); 
 
     flag = "end"; 
 
     $("#"+f1+",#"+f2+", #"+f3).css(styleWin); 
 
     
 
    } 
 
    
 
    //check if game has ended or player clicks at used field, else put sign in field 
 
    $("div.item").on("click", function(){ 
 
    var place = this.innerText; 
 
    if(place == "x" || place == "o"){ 
 
     console.log("Niedozwolony ruch!"); 
 
    } else if(flag !== "end"){ 
 
     this.innerText = x; 
 
     check(x); 
 
    } 
 
    }); 
 
    
 
    //Change between x and o 
 
    $(".container").on("click", function() { 
 
    if(flag !== "end"){ 
 
     (x == "o") ? x = "x" : x = "o"; 
 
     return x; 
 
    } 
 
    }); 
 
    
 
    //reset 
 
    $(".reset").on("click", function(){ 
 
    $(".item").removeAttr('style'); 
 
    $(".item").empty(); 
 
    flag = ""; 
 
    }); 
 
});
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.over { 
 
    display: grid; 
 
    border: 5px solid red; 
 
    grid-template-columns: auto 300px auto; 
 
    grid-template-rows: auto 300px auto; 
 
    grid-template-areas: ". f1 ." ". x ." ". f2 ."; 
 
} 
 

 
.container { 
 
    display: grid; 
 
    grid-template-columns: 100px 100px 100px; 
 
    grid-template-rows: 100px 100px 100px; 
 
    grid-template-areas: "a b c" "d e f" "g h i"; 
 
    grid-area: x; 
 
    grid-gap: 0; 
 
    justify-items: stretch; 
 
    align-items: stretch; 
 
    border: 1px solid red; 
 
} 
 

 
.item-a { 
 
    grid-area: a; 
 
} 
 

 
.item-b { 
 
    grid-area: b; 
 
} 
 

 
.item-c { 
 
    grid-area: c; 
 
} 
 

 
.item-d { 
 
    grid-area: d; 
 
} 
 

 
.item-d { 
 
    grid-area: d; 
 
} 
 

 
.item-e { 
 
    grid-area: e; 
 
} 
 

 
.item-f { 
 
    grid-area: f; 
 
} 
 

 
.item-g { 
 
    grid-area: g; 
 
} 
 

 
.item-h { 
 
    grid-area: h; 
 
} 
 

 
.item-i { 
 
    grid-area: i; 
 
} 
 

 
.fix { 
 
    grid-area: f1; 
 
    height: 100px; 
 
} 
 

 
.fix2 { 
 
    grid-area: f2; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.item:hover { 
 
    background-color: red; 
 
    cursor: pointer; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="over"> 
 
    <div class="fix"></div> 
 
    <div class="container"> 
 
    <div class="item-a item" id="a"></div> 
 
    <div class="item-b item" id="b"></div> 
 
    <div class="item-c item" id="c"></div> 
 
    <div class="item-d item" id="d"></div> 
 
    <div class="item-e item" id="e"></div> 
 
    <div class="item-f item" id="f"></div> 
 
    <div class="item-g item" id="g"></div> 
 
    <div class="item-h item" id="h"></div> 
 
    <div class="item-i item" id="i"></div> 
 
    </div> 
 
    <div class="fix2"><button class="reset">Reset</button></div> 
 
</div>

+0

好的,我有我的答案。如果应该如下所示: 'if(($(“#”+ testy [ij] [0])。text())== nazwa &&($(“#”+ testy [ij] [1]) .text())== nazwa &&($(“#”+ testy [ij] [2]).text())== nazwa){' –

回答

0

代码失败。当您使用类似testy[ij][0]的内容对其进行解引用时,您会收到字符串"a",而不是变量a中包含的对象。为了解决这个问题,改变你的testy声明,如下所示:

var testy = [[a,b,c], [d,e,f], [g,h,i], [a,d,g], [b,e,h], [c,f,i], [a,e,i], [g,e,c]];

您还可以删除调用testy[ij].split("");。该函数返回一个数组,并保持字符串testy[ij]不变。您没有使用返回的数组,因此对split的调用不起作用。

相关问题