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>

我知道它适用于小提琴，但我不知道为什么它不在我的主页上工作而不在div中写入函数。

Answer 1

我想问题是你在DOM实际渲染和准备好之前尝试分配onclick事件处理程序。我的建议是包装你的＆＃34;初始化代码＆＃34;在$（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'));
    });
});

Answer 2

如果你想将id从jquery传递给你的函数，你应该这样做：

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

Answer 3

你可以在jquery中使用.css

System.out.println

更改div函数的大小不起作用

3 个答案: