Question

我是jquery的新手，我的代码发生了奇怪的事情。 Jquery总是返回相同的数字，即使我按下不同的图像。问题出在哪儿？代码包括在下面。 HTML代码

＆＃13;

$(".image-upload").on("change", function() {
  console.log($(this).children("label").find("img").attr("data-id"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
  <div class="image-upload">
    <label for="file-input">
<img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="1"/>
</label>
    <input name="photos[]" id="file-input" type="file" data-ids="1" />
  </div>
</div>
<div class="col-md-2">
  <div class="image-upload">
    <label for="file-input">
	<img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="2"/>
</label>
    <input name="photos[]" id="file-input" type="file" data-ids="2" />
  </div>
</div>

＆＃13;

当触发改变时，控制台显示1，无论何时按下即可。为什么呢？

Answer 1

好像这样写：

$(this).children("label").children("img").attr("data-id")

将输出正确的data-id。注意使用“children”而不是“find”。

此外，通常最好提供某种类型的在线示例，以便更容易运行和测试问题。 https://jsfiddle.net/947f2hhf/

Answer 2

  <div class="col-md-2">
                    <div class="image-upload">
                        <label for="file-input">
                            <img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="1"/>
                        </label>
                        <input name="photos[]" id="file-input" type="file" data-ids="1"/>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="image-upload">
                        <label for="file-input">
                            <img src="<?= base_url("upload.png"); ?>" width="100" height="100" data-id="2"/>
                        </label>
                        <input name="photos[]" id="file-input2" type="file" data-ids="2" />
                    </div>
                </div>

html标记ID必须是唯一的。必须更改第二个文件输入标记'id'。

jquery返回错误的数据

2 个答案: