addEventListener如何可以忽略图像，并不断获取数字

Question

我有一个按钮，它有一个图像，它将被放置到另一个div，我没有问题。我对我在指南中遵循的JS感到困惑。想象一个带图像的按钮，我希望它具有数值，以便当我点击提交按钮时，只有该数字将被javascript和数据库获取。下面是JS变量声明：

var numbers  = document.querySelectorAll('.number'); 
var screenSpans = document.querySelectorAll('#screen span'); 

屏幕跨度是图像会去数是类图像和数字按钮。在HTML，它看起来像这样：

<div id="screen"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <button class="number"> 
    <img src="img/1.png" />1 
    </button> 

你会发现，我加了“1”只是尝试，如果它可以工作，但提交按钮不工作每当我有按钮的标签里面的<img src="img/1.png" />。没有img，一切都很完美，但我需要用图像来代替数字。简而言之，我只是希望图片被点击时会进入屏幕跨度，而javascript和数据库会改为读取数字。我的JavaScript如何忽略图像？下面是我使用的重要js：

for (var i = numbers.length - 1; i >= 0; i--) { 
    numbers[i].addEventListener('click', function(){ 
     reset = 0; 
     nextSpan(this.innerHTML); 
    }); 
}; 
function nextSpan (currNumber){ 
    for (var i = 0; i < screenSpans.length; i++) { 
     if (screenSpans[i].innerHTML == '' && reset == 0){ 
      screenSpans[i].innerHTML = currNumber; 
      reset = 1; 
     } 
    }; 
} 

将不胜感激任何帮助。谢谢！

Answer 1

在您form元件创建隐藏的输入元件（例如<input type="hidden" name="prop" value="2" />）;您可以根据需要设置此隐藏输入的值（例如，当您单击图像时）。如果您希望图像提供编号，那么对于每个图像，您可以设置一个自定义属性（例如data-img-num="2"），并在该特定图像被点击时将其设置为隐藏输入值。例如：

HTML

<form> 
    <input type="hidden" name="prop" value="0" /> 
    <input type="submit" /> 
</form> 

<div class="imgContainer"> 
    <img src="" data-img-num="1" /> 
    <img src="" data-img-num="2" /> 
</div> 

的jQuery等

$('.imgContainer > [data-img-num]').on('click', function() { 
    $('form input[name="prop"]').val($(this).attr('data-img-num')); 
}); 

类似的东西应该做的。

Answer 2

您可以使用<input type="text">和<label>元素。设置appearanceinput type="text"元素style属性至appearance:button; value属性至1; maxlength至0; name至<form>中元素的适当名称。在css设置元素的background-image，在:hover伪元素设置cursor到pointer。

<label>替代元素<span>元件。 click在.number元素，重复input type="text".labels，设置.innerHTML到.value的input type="text"元素。

在与input.number元件相关联input type="text"元件迭代.labels的click，设置label.innerHTML到input type="text"元件的.value。

在的formsubmit所述的.name，.value一对input type="text'元件的将被提交。

#screen > input[type="text"].number { 
 
    display:block; 
 
    background-image: url("http://lorempixel.com/50/50/technics"); /*"img/1.png"*/ 
 
    background-repeat: no-repeat; 
 
    color: transparent; 
 
} 
 

 
#screen > input[type="text"].number:hover { 
 
    cursor: pointer; 
 
}

<form action="/path/to/server/" method="POST"> 
 

 
    <div id="screen"> 
 
    <label for="image"></label> 
 
    <label for="image"></label> 
 
    <label for="image"></label> 
 
    <input type="text" 
 
      id="image" 
 
      class="number" 
 
      name="number" 
 
      value="1"    
 
      maxlength="0" 
 
      style="appearance:button;width:50px;height:50px;" /> 
 
    <!-- border:none;outline:none; --> 
 
    <!-- 
 
    <button class="number"> 
 
    <img src="img/1.png" />1 
 
    </button> 
 
    --> 
 
    <input type="submit"> 
 
    </div> 
 
</form> 
 
<script> 
 
    document.querySelector("#screen > .number") 
 
    .addEventListener("click", function(event) { 
 
    for (let label of event.target.labels) { 
 
      label.innerHTML = event.target.value; 
 
    } 
 
    }); 
 
</script>

的jsfiddle https://jsfiddle.net/qzeyc3jL/