Question:
function create() {
var num = 15;
for (var i = 0; i < num; i++) {
var div = document.createElement('div');
div.className = "ava";
div.onclick = function(i) {
return function() {
alert(i);
}
}(i);
div.innerHTML = '<strong>' + i + '</strong>';
div.setAttribute("id", i);
calb.insertBefore(div, calb.childen);
test(i);
}
}
.ava {
opacity: 0;
cursor: pointer;
text-align: center;
float: left;
width: 65px;
margin: 10px;
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c765f;
background-color: #C7F7B7;
transition: 0.3s;
}
.ava:hover {
transform: scale(1.1);
text-align: center;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function test(num) {
$('#' + num).animate({
opacity: '1'
}, 5000);
}
</script>
</head>
<body>
<div id="calb"></div>
<script>
create();
</script>
</body>
</html>
There are the following codes:
CSS:
.ava {
opacity:0;
cursor: pointer;
text-align: center;
float: left;
font-size: 18px;
width: 65px;
margin: 10px;
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c765f;
background-color: #C7F7B7;
transition: 0.3s;
}
.ava:hover {
transform: scale(1.1);
text-align: center;
}
JavaScript:
function create() {
var num = 15;
for(var i = 0; i < num; i++) {
var div = document.createElement('div');
div.className = "ava";
div.onclick = function(i) { return function() { alert(i); }}(i);
div.innerHTML = '<strong>' + i + '</strong>';
div.setAttribute("id", i);
calb.insertBefore(div, calb.childen);
test(i);
}
}
JQuery:
function test (num)
{
$('#'+num).animate({opacity:'1'},5000);
}
As a result, we have: – the cursor is not a pointer, – the on-click is not on-click, – there is no hover animation.
The problem appeared after embedding jQuery. help…
ps: How should it look like, or rather be written, a similar code that performs the functions that this one should perform? Thanks!
Answer:
Using jQuery 2.1.1 and without violating the HTML spec regarding DOM element id
generation ( https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html ).
function create() {
var num = 15;
for (var i = 0; i < num; i++) {
var div = document.createElement('div');
div.className = "ava";
div.onclick = function(i) {
return function() {
alert(i);
}
}(i);
div.innerHTML = '<strong>' + i + '</strong>';
div.setAttribute("id", "div" + i);
calb.insertBefore(div, calb.childen);
test(i);
}
}
function test(num) {
//console.log($('#div' + num).length);
$('#div' + num).animate({
opacity: '1'
}, 5000);
}
create();
.ava {
opacity: 0;
cursor: pointer;
text-align: center;
float: left;
width: 65px;
margin: 10px;
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c765f;
background-color: #C7F7B7;
transition: 0.3s;
}
.ava:hover {
transform: scale(1.1);
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calb"></div>