Question

我正在尝试将此代码转换为HTML代码;

                <div class="dot-span">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                    <span class="dot" onclick="currentSlide(4)"></span>
                    <span class="dot" onclick="currentSlide(5)"></span>
                    <span class="dot" onclick="currentSlide(6)"></span>
                    <span class="dot" onclick="currentSlide(7)"></span>
                    <span class="dot" onclick="currentSlide(8)"></span>
                    <span class="dot" onclick="currentSlide(9)"></span>
                    <span class="dot" onclick="currentSlide(10)"></span>
                    <span class="dot" onclick="currentSlide(11)"></span>
                    <span class="dot" onclick="currentSlide(12)"></span>
                    <span class="dot" onclick="currentSlide(13)"></span>
                    <span class="dot" onclick="currentSlide(14)"></span>
                    <span class="dot" onclick="currentSlide(15)"></span>
                    <span class="dot" onclick="currentSlide(16)"></span>
                    <span class="dot" onclick="currentSlide(17)"></span>
                    <span class="dot" onclick="currentSlide(18)"></span>
                </div>

进入一个JavaScript函数，复制HTML代码的动作，但我不确定从哪里开始考虑有很多一个类，每个元素都在显示不同的幻灯片。任何建议都会很棒。

Answer 1

＆＃13;

var containerDiv=document.body.querySelector('.dot-span');

function currentSlide(slide){
  console.log('click on slide '+slide);
}

for (var i=1; i<=18; i++){
  var span=document.createElement('span');
  span.setAttribute('class','dot');
  span.setAttribute('slideNumber',i);
  span.innerHTML='slide '+i;
  
  span.onclick=function(){
    var slideNum=this.getAttribute('slideNumber');
    currentSlide(slideNum);
  }
  
  containerDiv.appendChild(span);
  //onclick="currentSlide(1)"
}

＆＃13;

.dot{
  width:50px;
  height:50px;
  margin:3px;
  background-color:red;
  cursor:pointer;
}

＆＃13;

<div class="dot-span">
                    
                </div>

＆＃13;

Answer 2

将幻灯片编号作为属性提供给span

<div class="dot-span">
    <span class="dot" data-slicenum = "1"></span>
    <span class="dot" data-slicenum = "2"></span>
    <span class="dot" data-slicenum = "3"></span>
</div>

现在将偶数监听器添加到类dot

的元素中

var allDots = document.querySelectorAll( "dot" );
Array.from( allDots ).forEach( s => s.addEventListener( "click", function(e){
   var thisEl = e.currentTarget;
   var slideNum = thisEl.getAttribute( "data-slicenum" );
   currentSlide(slideNum);
}) );

Answer 3

尝试在父容器上只使用一个侦听器，而不是每个跨度使用一个侦听器：

const container = document.querySelector('.dot-span');
container.addEventListener('click', (e) => {
    if (e.target.tagName !== 'SPAN') return;
    const clickedIndex = [...container.children].indexOf(e.target);
    currentSlide(clickedIndex + 1);
  });

Answer 4

也许你正在寻找的东西

document.querySelectorAll(".dot").forEach(function(ele, i) {
  ele.addEventListener('click', function() {
    console.log(i + 1);
  })
});

.dot {
  width: 40px;
  height: 40px;
  background: red;
  display: block;
  border: 1px solid green;
}

<div class="dot-span">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

Answer 5

<html>
<body>
<div id='container'></div>
<script>
    // The javascript
    function spanslide(slides) {
        var t;
        for(t=1;t<=slides;t++) {
            document.getElementById('container').innerHTML += "<span class='dot' onclick='currentSlide("+t+")'>test</span>";
        }
    }
spanslide(18);
</script>
</body>

Answer 6

您可以在父节点上分配单击事件，检查目标并从子项列表中获取其索引。

＆＃13;

let p = document.querySelector('.dot-span');
p.addEventListener('click', e => {
  if (e.target && e.target.classList.contains('dot')) {
    let index = [...p.children].indexOf(e.target);
    console.log("Element ", index, " was clicked!");
    let yourNumber = index + 1;
    currentSlide(yourNumber);
  }
})

＆＃13;

<div class="dot-span">
  <span class="dot">a</span>
  <span class="dot">b</span>
  <span class="dot">c</span>

</div>

＆＃13;

Answer 7

这里有一些代码可以创建所需的幻灯片数量，并为主跨区添加一个事件监听器，以便您可以使用事件委派 - 当您单击其中一个幻灯片时，将调用handleClick函数，识别幻灯片编号（使用数据属性）。从那里你可以执行你需要的任何行动。

createSpans接受一个数字，并在每次迭代时向数组添加一些HTML，然后将其添加到正文中。

createSpans(6);
const span = document.querySelector('.dot-span');
span.addEventListener('click', handleClick, false);

function createSpans(n) {
  const arr = [];
  for (let i = 1; i <= n; i++) {
    arr.push(`<span class="dot" data-id="${i}">${i}</span>`);
  }
  const html = `<div class="dot-span">${arr.join('')}</div>`;  
  document.body.innerHTML = html;
}

function handleClick(e) {
  console.log(e.target.dataset.id);
}

.dot {
  padding: 2px 5px;
  background-color: #dfdfdf;
  margin-right: 2px;
}

.dot:hover {
  cursor: pointer;
  background-color: #afafaf;
}

在JS中创建一行可点击按钮

7 个答案: