javascript - 更改 div 功能的大小不起作用

Question

我有一个函数，可以在单击 div 时改变它的大小。现在我必须在 html 页面中编写 onclick 命令，但我希望它位于 extern .js 文件中。

现在是 html 格式:

 <div id="box1" class="kaesten" onclick="changeSize('box1')"> Title 1 </div>

我想要什么:

<div id="box1" class="kaesten" > Title 1 </div>

在 jquery 中尝试了一些东西，但没有成功:

function changeSize(id) {
  var elem = document.getElementById(id);
  var currentAbsoluteElem = document.getElementById('dummy');
  var text = elem.innerHTML;
  currentAbsoluteElem.innerHTML = text;
  currentAbsoluteElem.setAttribute('style', 'display:block');
  /*Extra styling neeed  to be done here*/

}

var elems = document.getElementsByClassName('kaesten');
for (var i = 0; i < elems.length; i++) {
  elems[i].onclick = function() {
    changeSize(this.id);
  }
}

var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function() {
  console.log(document.getElementsByClassName('absoluteclass'))
  document.getElementsByClassName('absoluteclass')[0].setAttribute('style', 'display:none');
}
$(document).ready(function() {

$('.kaesten').click(function() {
    changeSize($(this).attr('id'));
});
});

.kaesten {
  width: 240px;
  height: 300px;
  background-color: darkgrey;
  background-position: center;
  background-repeat: no-repeat;
  text-shadow: 0px 0px 3px #000;
  border: 5px solid #F0F8ff;
  vertical-align: top;
  text-shadow: 3px 3px 4px #777;
  float: left;
  margin-left: 30px;
}

.absoluteclass {
  position: absolute;
  background-color: darkgrey;
  width: 600px;
  height: 600px;
  left: calc(30%);
  display: none;
}

<div id="box1" class="kaesten">title1</div>
<div id="box2" class="kaesten">title2</div>
<div id="box3" class="kaesten">title3</div>
<div id="box4" class="kaesten">title4</div>
<div id="dummy" class="absoluteclass"></div>

我知道它在 fiddle 中可以工作，但我不知道为什么如果不在 div 中编写函数，它就不能在我的主页上工作。

Answer 1

我猜问题是你试图在 DOM 实际渲染并准备好之前分配 onclick 事件处理程序。我的建议是将“初始化代码”包装在 $(document).ready() 方法中。如下:

$(document).ready(function() {
    // Apply the on click event handlers here, using jQuery or not
    // For instance:
    $('.kaesten').click(function() {
        changeSize($(this).attr('id'));
    });
});