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" 元素。

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

在form 的submit .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/