Question

我是Java语言的新手，我制作了几个方格，上面有一个div和点（svg），

，我想通过制作一个数组在for循环中按div id对这些div编号。

我应该如何修正我的代码？

    //Javascript
    //create a 12 dotBoxes spread evenly across the window
    function getGridAreaSize(){
    	$('#grid-area').width($(window).width() * .5);
    }

    function getBoxSize(){
    	var boxWidth = $('#grid-area').width() / 5;
    	return boxWidth;
    };

    function createBoxes(){
    	for (i = 0; i < 15; i++) {
    		// divsToAppend += '<div id="div' + (++i) + '" />';
            // arrayDiv[i] = document.createElement('div');
            // arrayDiv[i].id = 'dot' + i;
     		// arrayDiv[i].className = 'dotBox';
     		//             document.getElementById('#grid').appendChild(arrayDiv[i].id);
        // document.getElementById(arrayDiv[i].id).appendChild(dotarea);
        // document.getElementById('#dotarea').appendChild(dot);
		$('#grid').append("<div class='dotBox'><div class='dotarea'><div class='dot'></div></div></div>");
		$('.dotBox').css('width',getBoxSize());
		$('.dotBox').css('height',getBoxSize());
	};
    };

    getGridAreaSize();
    getBoxSize();
    createBoxes();

    

    //html
    <!DOCTYPE html>
    <html>

    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1">

    	<!--FONTS-->
    	<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
    	<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css' />
    	<link href='http://fonts.googleapis.com/css?family=Work+Sans:100,300,700' rel='stylesheet' type='text/css'>

    	<!--STYLESHEETS-->
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css" />
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
    	<link rel="stylesheet" href="css/global.css" type="text/css" />

    	<!--SCRIPTS-->
    	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js">    </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">    </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js">    </script>-->
    </head>

    <body>
	<svg id="canvas" width="100%" height="100%">
    <line class="line original" x1="0" y1="0" x2="0" y2="0" />
	</svg>
	<div class="container-fluid">
		<div class="splash">
			<h1>Hello! My name is Soheum Hwang</h1>
			<h2>Hover over each dot to see my work!</h2>
			<br>
			<p id="mobile-warning"> Sorry - this kind of functionality sucks on mobile! Please view it on a desktop for best results. </p>
		</div>
	</div>
	<div id="grid-area">

		<div id="grid">
			<div id="popup">
				<p>some text here</p>
			</div>

		</div>
	</div>
  <script src="scripts/dots.js"></script>
</body>

</html>

我想将不同的文本悬停在不同的框上，所以我试图将它们排列成行不通的..

Answer 1

在将其附加到div时也添加我

$('#grid').append("<div class='dotBox' id='box_"+i+"'><div class='dotarea'><div class='dot'></div></div></div>");

如何在Java中的for循环中按类名排序div

1 个答案: