Question

我正在开发一个脚本，它会生成100个元素的随机列表，其中每个第三个元素都是可点击的。到目前为止，我陷入了下面的阶段。任何想法如何进步？

var hundred = Array(100);
hundred.toString();

for (i = 0; i < hundred.length; i++) {
  document.write("Item " + (i + 1) + " of" + hundred.length + "</br>")
}

Answer 1

编辑：完整示例

var hundred = Array(100);
var node;
hundred.toString();

for (i = 0; i < hundred.length; i++) {
  if(i%3===0 && i!==0){
  node = document.createElement("button");
  node.addEventListener('click', function() { alert('clicked'); });
  node.innerHTML = 'clickablke';
  } else {
  node = document.createElement("div");
  node.innerHTML = 'just div';
  }

  document.body.appendChild(node);
}

Answer 2

我用过按钮。每个第三个元素都是可点击的。其余元素将具有禁用属性

var hundred = Array(100);
hundred.toString();
for (i = 0; i < hundred.length; i++) {
 
  if(i%3===0 && i!==0){
    var button = document.createElement("button");
    button.innerHTML ="Click "+i ;
  
    document.getElementsByTagName('body')[0].appendChild(button);
    
  }else{
      var button = document.createElement("button");
    button.innerHTML ="Click "+i ;
   button.disabled = true;
    document.getElementsByTagName('body')[0].appendChild(button);
    
    
    
  }
}

Answer 3

如评论所述，

使用document.createElement创建一个元素并为它们分配事件监听器，并将这些元素附加到html或document.body
中的元素，而不是使用document.write。

＆＃13;

var hundred = Array(100);
for (i = 0; i < hundred.length; i++) {
  let el = document.createElement('span');
  el.textContent = i + " ";
  if((i+1) % 3 === 0){
    el.classList.add('clickable')
    el.addEventListener("click", notify)
  }
  document.body.appendChild(el)
}

function notify(){
  this.classList.add('clicked')
  console.log(this.textContent)
}

＆＃13;

.clickable{
  color: blue;
  text-decoration: underline;
}

.clicked{
  color: gray;
}

＆＃13;

参考

Answer 4

首先，您需要创建元素。然后将此onclick i%3 == 0应用于每个3 rd元素

已更新

使用classList.add()点击其粗体后

for (i = 1; i < 10; i++) {
  var s = document.createElement('SPAN');
  if (i % 3 == 0) {
    s.className = 'clickable';
    s.onclick = clicks;
  }
  s.textContent=i;
  document.body.appendChild(s)
}

function clicks() {
  console.log(this.innerHTML)
  this.classList.add('bold')
}

.clickable {
  color: red;
}
.bold{
font-weight:bolder;
}

Answer 5

要做到这一点，我会为每个项目引用创建一个事件监听器，因此：每三个可点击元素都会变为粗体：

＆＃13;

 var hundred = Array(100);
hundred.toString();
var btn = Array(100);
for (i = 0; i < hundred.length+1; i++) {
  btn = document.createElement("p");
  btn.innerHTML="Item " + (i-1 + 1) + " of" +   hundred.length + "</br>";

  if(i%3===0 && i!==0){
  btn.addEventListener('click', function() { 
this.style.fontWeight = 'bold'; }, false);


  }
    document.body.appendChild(btn);                    
}

＆＃13;

带有可点击元素的Javascript列表

5 个答案:

参考