在每个图块javascript中生成不同的文本

时间：2018-07-14 21:45:01

标签： javascript jquery

我有包含名称和姓氏的字符串数组。我创建了由随机名称和随机姓氏组成的用户名，并且我想在每个生成的图块中显示不同的用户名。我试图拆分名称和姓氏，然后将其添加到数组中并获取随机数组索引，但是它不起作用。更好的解决方案是使用我的“用户名”。最大的问题是我无法修改getData（）函数-它始终为每个图块分配相同的用户名。

function createGrid(x, y) {
    for (var cols = 0; cols < x; cols++) {
        for (var rows = 0; rows < y; rows++) {
            console.log(namesArr)
            console.log(x*y)
            numberOfTiles = x*y;
            var randonIndex = Math.floor(Math.random() * numberOfTiles);
           // $(".usernameSpace").html(namesArr[randomIndex]);
            //Doesn't work here
            $('#container').append("<div class='grid'><div class = 'usernameSpace'></div></div>");
        };
    };
    $('.grid').width(800 / x);
    $('.grid').height(800 / x);
};
function refreshGrid() {
    var x = $("#colsNumber")[0].value;
    var y = $("#rowsNumber")[0].value;
    $('.grid').remove();
    createGrid(x, y);
};

function getData(count) {
    var names = ["Michal ", "Jan ", "Katarzyna ", "Andrzej ", "Jozef ", "Bartek ", "Mikolaj ", "Tomasz ", "Julian ", "Brajan ", "Dzesika "];
    var surnames = ["Noga ", "Kowalski ", "Nowak ", "Pazura ", "Duda ", "Komorowski ", "Tomczyk ", "Jozefowicz ", "Lechicki ", "Goldberg "];
    result = [];

    for (var i = 0; i < count; i++) {
        var randomNameIndex = Math.floor(Math.random() * names.length);
        var randomSurnameIndex = Math.floor(Math.random() * surnames.length);
        var name = names[randomNameIndex];
        var surname = surnames[randomSurnameIndex];
        result.push({
            name: name,
            surname: surname
        });
    }
    return result
}

function textDisplay() {
    var numberOfTiles = 12;
    //for (i = 0; i <= numberOfTiles; i++) {
    var data = getData(12);
    //var username = "";
    ////////////////////////////////////////////////////////////////////
    username = "";
    $.each(data, function (i, { name, surname }) {
        username += ` ${name} ${surname}`;
    });
    ////////////////////////////////////////////////////////////////////
    // }

    namesToDisplay = "";
    surnamesToDisplay = "";

    $.each(data, function (i, { name }) {
        namesToDisplay += `${name}`;
    });

    $.each(data, function (i, { surname }) {
        surnamesToDisplay += `${surname}`;
    });
    console.log(username)
    console.log(namesToDisplay)
    console.log(surnamesToDisplay)

    //$(".usernameSpace").html(username);
    namesArr = namesToDisplay.split(" ");
    console.log(namesArr)


    $(".usernameSpace").html(namesArr[2]);
}
function AssignUsername(Class, content) {
    var container = document.getElementsByClassName(Class);
    $(container).html(content);
}

$(document).ready(function () {
    $(".startBtn").click(function () {
        refreshGrid();
        textDisplay();
    });
});
#container {
	position: relative;
	margin:auto;
	height:800px;
	width:800px;
}
.grid{
	outline:5px solid white;
	margin:0;
	padding:0;
	border:none;
    background-color: #212121;  
	display:inline-block;
	color: white;
}
.input{
    width: 15%;
    background-color: #757575;
    font-size: 18px;
    border: 3px;
    height: 4%;
	border-radius: 5px;
	color: white;
}
html {
	font-family: 'Arial';
}
.startBtn{
	background-color: #4b4b4b;
	border-radius: 10px;
	color: white;
}
#textDisplay{
	height:800px;
	width:800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<head>
    <link rel=stylesheet type="text/css" href="MetroUI 03'2018 basic.css">
    <script src="jquery.js"></script>
    <script src="MetroUI 03'2018 basic.js"></script>
</head>

<body onload="textDisplay()">
<p>
    Give me width of grid:
</p>
<div>
    <input class='input' id='colsNumber' type='number'>
</div>
<p>
    Give me height of grid:
</p>
<div>
    <input class='input' id='rowsNumber' type='number'>
</div>
<button class="startBtn">START!</button>
<div class='nameDisplay'></div>
<div class="Container"></div>
<div id = "container"></div>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

在您执行的代码中：

$(".usernameSpace").html(namesArr[2]);

您正在将具有该类的所有标题分配给相同的HTML值。而是遍历标题，并根据您的data变量为其分配一个值：

$(".usernameSpace").each(function(idx){
  $(this).html(data[idx].surname);
});

尽管我建议您在创建名称时将名称直接存储在data元素的.usernameSpace属性中。然后，您可以在遍历元素时仅使用$(this).data("surname")。如果data和.usernameSpace元素的数量不同，这种方式也将更加安全，并且使代码更简单。

Here is a fiddle example of what I described above 

function createGrid(x, y) {
    for (var cols = 0; cols < x; cols++) {
        for (var rows = 0; rows < y; rows++) {
            console.log(namesArr)
            console.log(x*y)
            numberOfTiles = x*y;
            var randonIndex = Math.floor(Math.random() * numberOfTiles);
           // $(".usernameSpace").html(namesArr[randomIndex]);
            //Doesn't work here
            $('#container').append("<div class='grid'><div class = 'usernameSpace'></div></div>");
        };
    };
    $('.grid').width(800 / x);
    $('.grid').height(800 / x);
};
function refreshGrid() {
    var x = $("#colsNumber")[0].value;
    var y = $("#rowsNumber")[0].value;
    $('.grid').remove();
    createGrid(x, y);
};

function getData(count) {
    var names = ["Michal ", "Jan ", "Katarzyna ", "Andrzej ", "Jozef ", "Bartek ", "Mikolaj ", "Tomasz ", "Julian ", "Brajan ", "Dzesika "];
    var surnames = ["Noga ", "Kowalski ", "Nowak ", "Pazura ", "Duda ", "Komorowski ", "Tomczyk ", "Jozefowicz ", "Lechicki ", "Goldberg "];
    result = [];

    for (var i = 0; i < count; i++) {
        var randomNameIndex = Math.floor(Math.random() * names.length);
        var randomSurnameIndex = Math.floor(Math.random() * surnames.length);
        var name = names[randomNameIndex];
        var surname = surnames[randomSurnameIndex];
        result.push({
            name: name,
            surname: surname
        });
    }
    return result
}

function textDisplay() {
    var numberOfTiles = 12;
    //for (i = 0; i <= numberOfTiles; i++) {
    var data = getData(12);
    //var username = "";
    ////////////////////////////////////////////////////////////////////
    username = [];
    $.each(data, function (i, { name, surname }) {
        username.push(` ${name} ${surname}`);
    });
    ////////////////////////////////////////////////////////////////////
    // }

    namesToDisplay = "";
    surnamesToDisplay = "";

    $.each(data, function (i, { name }) {
        namesToDisplay += `${name}`;
    });

    $.each(data, function (i, { surname }) {
        surnamesToDisplay += `${surname}`;
    });
    console.log(username)
    console.log(namesToDisplay)
    console.log(surnamesToDisplay)

    //$(".usernameSpace").html(username);
    namesArr = namesToDisplay.split(" ");
    console.log(namesArr)


    $(".usernameSpace").each(function(idx){
      $(this).html(username[idx]);
    })
}
function AssignUsername(Class, content) {
    var container = document.getElementsByClassName(Class);
    $(container).html(content);
}

$(document).ready(function () {
    $(".startBtn").click(function () {
        refreshGrid();
        textDisplay();
    });
});
#container {
	position: relative;
	margin:auto;
	height:800px;
	width:800px;
}
.grid{
	outline:5px solid white;
	margin:0;
	padding:0;
	border:none;
    background-color: #212121;  
	display:inline-block;
	color: white;
}
.input{
    width: 15%;
    background-color: #757575;
    font-size: 18px;
    border: 3px;
    height: 4%;
	border-radius: 5px;
	color: white;
}
html {
	font-family: 'Arial';
}
.startBtn{
	background-color: #4b4b4b;
	border-radius: 10px;
	color: white;
}
#textDisplay{
	height:800px;
	width:800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<head>
    <link rel=stylesheet type="text/css" href="MetroUI 03'2018 basic.css">
    <script src="jquery.js"></script>
    <script src="MetroUI 03'2018 basic.js"></script>
</head>

<body onload="textDisplay()">
<p>
    Give me width of grid:
</p>
<div>
    <input class='input' id='colsNumber' type='number'>
</div>
<p>
    Give me height of grid:
</p>
<div>
    <input class='input' id='rowsNumber' type='number'>
</div>
<button class="startBtn">START!</button>
<div class='nameDisplay'></div>
<div class="Container"></div>
<div id = "container"></div>
</body>

</html>

相关问题
最新问题