$（。class）.eq（）。append在工作两次后附加到错误的类

时间：2015-02-28 12:09:55

标签： javascript jquery

我正在创建一个应用程序来读取日志文件，从中生成卡片图像，然后将卡片名称存储到div上的标签中。我有一个if句子，在12个选秀之后，卡片名称被附加到具有相同类别的下一个div。它曾经工作正常，但现在我在开始时将div .display设置为none，然后将其设置为inline-block manualy，现在它只会将我追加到前两个div而不是所有四个第二个div只是溢出直到我用完卡片。

此应用程序打开的LOG FILE（您需要手动下载它，然后点击小提琴中的浏览来运行它）

这里是整个事情的小提琴，希望它不会太混乱

＆＃13;
＆＃13; 
var prelink = "http://mtgimage.com/card/";
var postlink = ".jpg";

var booster = 1;
var pick = 0;
var currentCards = 15;

var sortingCardsInt = 0;

var cards = [];
for(t=0;t<45;t++) {
    cards.push([]);
}
var picks = [];

$("#draftlog").change(function() {
    //hides start message, tip jar
    $('.startMessage').css('display', 'none');
    $('.tipJar').css('display','none');
    //shows picks list
    $('.picks').eq(0).css('display', 'inline-block');
    $('.picks').eq(1).css('display', 'inline-block');
    $('.picks').eq(2).css('display', 'inline-block');
    $('.picks').eq(3).css('display', 'inline-block');
    //removes card container background
    $('.cardcontainer').css('background-image','none');
    //gets first file from draftlog
    var logFile = $('#draftlog').get(0).files[0];     
    //reads first file from draftlog as text
    var reader = new FileReader;
    reader.readAsText(logFile);
    reader.onload = function(e) {
    var rawLog = reader.result;   
    //splits the text into an array of strings for every new line
    var re=/\r\n|\n\r|\n|\r/g;
    arrayOfLines = rawLog.replace(re,"\n").split("\n");    
    //removes "    "
    for(x=0;x<arrayOfLines.length;x++) {
        arrayOfLines[x] = arrayOfLines[x].replace(/    /g,'');
    }    
    //sorts cards into pick arrays
    sortCards(15);
    sortCards(167);
    sortCards(319);
    //tags picked card
    for(y=0;y<cards.length;y++) {
        for(x=0;x<cards[y].length;x++) {
            var start = cards[y][x].substring(0,4);
            if(start === "--> ") {
                picks.push(x);
                cards[y][x] = cards[y][x].replace(/--> /g,'');
            }
        }
    }    
    //turns picks into links
    for(y=0;y<cards.length;y++) {
    for(x=0;x<cards[y].length;x++) {
        cards[y][x] = prelink.concat(cards[y][x]);
        cards[y][x] = cards[y][x].concat(postlink);
        cards[y][x] = cards[y][x].replace(/ /g,'_');
    }
    }
    loadCards();
};
});

$(".card").hover(
        function() {

        },
        function() {

        });
        
$(".card").click(function () {
    if ($(this).hasClass('selected')) {
        //formats and appends cardname onto related div
        var cardname = $(this).attr('src');
        cardname = cardname.replace("http://mtgimage.com/card/",'');
        cardname = cardname.replace(".jpg",'');
        cardname = cardname.replace(/_/g,' ');
        if(pick < 12){
        $(".picks").eq(0).append('<a class="picksave">'+cardname+'</a>');
        }
        else if(pick => 12 && pick < 24){
        $(".picks").eq(1).append('<a class="picksave">'+cardname+'</a>');   
        }
        else if(pick => 24 && pick < 36){
        $(".picks").eq(2).append('<a class="picksave">'+cardname+'</a>');
        }
        else if(pick => 36){
        $(".picks").eq(3).append('<a class="picksave">'+cardname+'</a>');
        }
        //counts pick, changes currentCards number
        if (currentCards > 1) {
            pick++;
            currentCards--;
        //opens next booster    
        } else {
            pick++;
            booster++;
            currentCards = 15;
        }
        clearCards();
        loadCards();
    } else {
        //clears all card borders to white
        for(x=0;x<15;x++) {
            $('.card').eq(x).removeClass('selected');
            $('.card').eq(x).css('border','4px solid white');
            $('.historyPick').css('border', '4px solid lime');
        }
        //selects card, makes border gray
        $(this).addClass('selected');
        $(this).css('border', '4px solid gray');        
        }
});

function loadCards() {    
    //writes pick onto cards, makes them visible
    for(x=0;x<currentCards;x++) {
        $(".card").eq(x).attr('src', cards[pick][x]);
        $(".card").eq(x).css('display', 'inline');
        $(".card").eq(picks[pick]).addClass('historyPick');
        $('.card').eq(picks[pick]).css('border', '4px solid lime');
    }
};

function clearCards() {
    //hides all cards
    for(x=0;x<15;x++) {
        $('.card').eq(x).css('display', 'none');
        $('.card').eq(x).attr('src', 'http://mtgimage.com/card/cardback.jpg');
        $('.card').eq(x).removeClass('historyPick selected');
        $('.card').eq(x).css('border', '4px solid white');
    }
}

function sortCards(num) {
    var currentLine = num;
    var numCards = 15;
    var pickNumber = 0;
    
    for(y=0;pickNumber<15;y++) {
        for(x=0;x<numCards;x++) {
            cards[sortingCardsInt].push(arrayOfLines[currentLine]);
            currentLine++;
        }
        pickNumber++;
        sortingCardsInt++;
        numCards--;
        currentLine +=2;
    }
}
＆＃13; 
body {
    background-color:#0066ff;
}
.cardcontainer {
    margin:auto;
    width:1260px;
    height:650px;
    border-radius: 3px;
    overflow:auto;
    background-color:white;
    background-image: url("images/program/cardbox.jpg");
    background-repeat:no-repeat;
    background-size:100%;
}
.startMessage {
    font-family:verdana;
    font-size:20px;
    font-weight:bold;
    text-align: center;
    width: 420px;
    height:325px;
    margin-top:162px;
    margin-right:auto;
    margin-left:10%;
    background-color:white;
    border-radius:10px;
    padding:10px;
    opacity:0.8;
}
.cardbox {
    border-radius: 5px;
    width:auto;
    display:inline-block;
}
.card {
    border: 4px solid white;
    width:192px;
    height:272px;
    border-radius: 3px;
    display:none;
}
.picksbox {
    width:1260px;
    height:285px;
    margin:auto;
    background-color:white;
    background-image:url("images/program/picksbox.jpg");
    border-radius:3px;
}
.tipJar {
    width:146px;
    height:250px;
    background-image:url("images/program/TipJar.jpg");
    background-size:100%;
    border-radius:10px;
    margin:auto;
    opacity:0.7;
    position:relative;
    top:17px;
}
.picks {
    display:none;
    width:315px;
    height:285px;
    margin:auto;
    overflow:auto;
    font-family:verdana;
    font-weight:bold;
}
.picksave {
    font-family:verdana;
    margin:5px;
    display:block;
    font-size:14px;
}
.options {
    margin-top:5px;
    margin-bottom:5px;
    margin-right:auto;
    margin-left:auto;
    width:1260px;
    background-color:white;
    border-radius:3px;
}
＆＃13; 
<html>
    <head>
        <title>MTGO draft replayer 0.1.3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="cardcontainer">
            <div class ="startMessage">
                <br/>
                Welcome to the TopdeckAndWreck.com MTGO Draft Replayer!<br/>
                <br/>
                In case you're not sure where and how to start check out our tutorial or FAQ pages.<br/>
                <br/>
                Thanks for visiting and have fun!
            </div>
            <div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div>
        </div>
        
        <div class="options">
            <input type="file" name="draftlog" id="draftlog">            
        </div> 
        
        <div class="picksbox">
            <div class='tipJar'></div>
        <div class="picks"></div
        ><div class="picks"></div
        ><div class="picks"></div
        ><div class="picks"></div>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
        <script src="magic.js"></script>
        
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

测试了您的逻辑运算符，尤其是代码的以下部分中的greater than equal operators：

        else if(pick => 12 && pick < 24){
           $(".picks").eq(1).append('<a class="picksave">'+cardname+'</a>');   
        }
        else if(pick => 24 && pick < 36){
           $(".picks").eq(2).append('<a class="picksave">'+cardname+'</a>');
        }
        else if(pick => 36){
           $(".picks").eq(3).append('<a class="picksave">'+cardname+'</a>');
        }

当我测试=>运算符时，出现以下错误： Uncaught SyntaxError：Unexpected token =＆gt; 。也许应该使用>=。我希望这会有所帮助： - ）

console.log( 3 >= 2); //true
console.log( 3 <= 2); //false
//console.log( 3 => 2); //Uncaught SyntaxError: Unexpected token =>

相关问题
最新问题