带有可点击元素的Javascript列表[重复]答案

【问题标题】：Javascript list with clickable elements [duplicate]带有可点击元素的Javascript列表[重复]
【发布时间】：2017-06-09 11:04:04
【问题描述】：

我正在编写一个脚本，该脚本将生成 100 个元素的随机列表，其中每三个元素都是可点击的。到目前为止，我被困在下面的阶段。有什么想法可以进步吗？

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

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

【问题讨论】：

不使用document.write，而是使用document.createElement 创建一个元素并为其分配事件侦听器并将这些元素附加到html 或document.body 中的元素
所以你需要写一个按钮或者链接什么的。

标签： javascript arrays string list

【解决方案1】：

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

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);
    
    
    
  }
}

【讨论】：

@rajesh jquery 已删除

【解决方案2】：

已编辑：完整示例

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);
}

【讨论】：

每三个元素都可以点击？
它是如何点击的？ ;)
点击后每隔三个元素会变为粗体。

【解决方案3】：

首先你需要创建元素。然后将 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;
}

【讨论】：

只是一个指针，如果你使用.innerHTML=，不要循环更新它。创建一个大的 HTML 字符串并执行批量操作。
@Rajesh 我只是用来展示元素。
以及如何在单击后更改每三个元素的外观。因此，当脚本加载时，所有元素看起来都一样。点击每三分之一后，它会变为粗体下划线等？
查看更新的答案@Kobiasz24\

【解决方案4】：

如评论，

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

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)
}

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

.clicked{
  color: gray;
}

参考文献

【讨论】：

以及如何在单击后更改每三个元素的外观。因此，当脚本加载时，所有元素看起来都一样。点击每三分之一后，它会变为粗体下划线等？
谢谢！我现在看到了。
@Kobiasz24 请检查更新

【解决方案5】：

有多种方法可以做到这一点，我会为每个项目引用创建一个事件侦听器，因此：每三个可点击元素变为粗体：

 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);                    
}

【讨论】：